Amber/npm not serving assets correctly?

Help & Support
1

After creating a new project amber.js is undefined. You can recreate this issue by creating a new Amber project adding console.log(Amber) to the bottom of main.js

I am not very familiar with how the webpack serves assets but there are 2 copies of main.js that are served. After inspecting the sources in Chrome I noticed that there are 2 versions of main.js. The version throwing the error is located in “webpack://.src/assets/javascripts/main.js”. When I inspect this file during run-time Amber can not be found. “ReferenceError: amber is not defined” The second version of the file is located in “/dist/main.bundle.js”. I am not sure why both assets are being served. Is this possibly an issue with npm?

I have also asked this question on Stack Overflow.

Amber CLI (amberframework.org) - v0.11.3
Crystal 0.27.0 [c9d1eef8f] (2018-11-01)
LLVM: 4.0.0
Default target: x86_64-unknown-linux-gnu

2

Looks like you’ve spotted a bug that I’d introduced! :sweat_smile: I’d missed this because I tend to use tree-shaking in my JS so hadn’t realised the default export would no longer catch. I’ve just submitted a PR over to Amber which should hopefully make its way in to master at some point, but while you wait:

Solution 1, change the Amber import line to:

import * as Amber from 'amber';

Solution 2:

import { Channel, Socket } from 'amber';

// Then reference as:
let socket = new Socket('/notification');
...
3

Thank you very much for the quick response. I have been developing in RoR for almost 5 years and I instantly fell in love with this project. I have started moving some of my projects directly to Crystal with Amber. I hope to be able to contribute in the near future.

4

I’m in the same boat! I’ve only been using it for a couple of weeks and love it. It’s insanely flexible, moreso than you’d think. My project is exactly the way I want it and Amber just continues along fine, even when everything isn’t where it’d expect.

I haven’t contributed much but if you get the chance, please do :slight_smile:. They’re really good with new contributors and we’re all in this together so the more bug-fixes that can be boxed off, the more stable it is for us all.

5

Quick follow-up. I am able to use jQuery directly from main.js but I can not access it in any of my views. I have tried importing it both ways. I am able to call other packages that I install via npm in the views but not jQuery.

npm install jquery

//main.js I have tried both ways.
import from 'jquery'; import * as from ‘jquery’

6

Sorry on the late response, I only check here when I remember!

By views do you mean a script tag within your slang files? jQuery is a bit of a funny one in the sense that it doesn’t really ‘fit’ the Webpack model for the way many people want to use it. Most people expect the $ variable or the jQuery variable on the window (and I suspect that you’ll only be able to access variable attached to window in your view templates anyway).

I might have misunderstood your problem in all fairness, but you might be able to do:

import * as jQuery from 'jquery';
window.$ = window.jQuery = jQuery;

or just include the jQuery CDN tag at the top of your application layout: https://developers.google.com/speed/libraries/#jquery

7

Thanks! That is what I have been doing. :grinning: