I'm writing an Ember.js application using Ember Cli, and I want to include a non-bower dependency - basically a dependency from my vendor folder.
The instructions on doing so is telling me to add the following line into my ember-cli-build.js file:
app.import('vendor/dependency-to-include.js');
That would work fine with a normal ES5 flavored dependency, but what if I want to add a dependency written in ES6?
Right now it just delivers it to the browser untouched, which produces an error like:
Uncaught SyntaxError: Unexpected reserved word
because my ES6 flavored dependency uses the following syntax:
import Util from './util
I'm guessing that I need to tell ember-cli-build to transpile this particular dependency before passing it on to the browser, but how do I go about doing that?
Thanks
For transpiling imported dependencies you need to run the imported file(s) through the broccoli addon broccoli-babel-transpiler. For a basic example, checkout this file: https://github.com/thefrontside/ember-impagination/blob/2fa38d26ef1b27a3db7df109faa872db243e5e4c/index.js. You can adapt this addon to an in-repo addon for your project.
See this link for the background discussion and #rwjblue and #cowboyd on the actual fix: https://github.com/ember-cli/ember-cli/issues/2949
Are you currently including Babel within your project? I would have thought that it checks your vendor directory the same as it does everything else and converts the ES6 code to ES5.
The other option would be to just convert the file to ES5 manually whenever you need to include a vendor file with ES6 syntax. Not necessarily ideal, but if it's a static file then it's something you'll need to do once and then forget about.
Related
In the Jest tests for my React app in WebStorm, the following line
const { createMemoryHistory } = require("history");
has the following warning:
Module is not listed in package.json dependencies
The tests run as expected, they pass and fail as expected. createMemoryHistory works. And when I hover on history WebStorm actually shows me the documentation for the library.
(strike this:) But history is a native JS library, like fs, is it not? How do I fix this pesky warning?
UPDATE: Okay, I understand that fs is not a native JS library, it's a core node.js module. I was wrong and thanks for setting me straight on that.
I see that my package-lock.json does include an entry for "node_modules/history". It looks like it's two indents deep, but the lockfile is too complex for me to really tell, or get breadcrumbs, or fold the branch to see where this line falls in the tree.
So I guess the real question is, Webstorm is saying that I don't have the dependency, but the lockfile implies that I do. Unless I'm misunderstanding further.
Again, how do I fix this pesky warning? (or what other fact am I missing? Remember, everything does actually work).
fs is a core Node.js module, i.e. its code is compiled into Node.js binary and doesn't have to be installed. history library is a usual NPM module that is not a part of Node.js core and has to be added with npm i history(see https://github.com/remix-run/history/blob/main/docs/installation.md). The IDE just tells you that you are importing a module that is not listed among dependencies in your package.json
In my project if I include bootstrap's javascrpt file via
app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.min.js'); in ember-cli-build.js I get a bunch of js errors.
If instead I include it in index.html it works fine. Any idea what could be causing this?
Error-
SyntaxError: export declarations may only appear at top level of a module
I can think of 3 things to try here:
Link to the full file. I had this line in a (pretty old) app that worked fine:
app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');
Make sure you app.import is inside of the main module.exports declaration in your ember cli build.
You might also try testing it out with a different bower package to see if the problem is bootstrap or your app.
If all else fails (and even if it succeeds), I highly recommend using ember bootstrap instead. It will handle the stylesheets for you and provide some Ember friendly ways to implement bootstrap components. You won't need to do the import anymore. Overall, it's best to avoid mixing libraries that modify the DOM (like plain bootstrap) with ember components. http://www.ember-bootstrap.com
I'm using WebStorm 2017.1.3, although also tried with latest EAP, and i can't get import from statement to work. I just keep getting the following error:
import Utils from './utils'
^^^^^^
SyntaxError: Unexpected token import
In my packages.json i have babel-cli, babel-preset-env and babel-preset-es2015 defined. I have followed various blog posts and videos but still get same error.
ES6 is enabled in settings and i tried adding Babel file watch as per documentation but nothing seems to work. This feels like it should be a lot easier and just work, so i must be missing a important part of the jigsaw.
Does anyone have a working step by step, from fresh project, how to guide in configuring webstorm to work with import ?
Some places say use file watch, others say just to change project configuration interpreter to use babel-node. Other say must use Gulp... very confusing.
Thank you.
fLo
To make things clear: this is not about configuring WebStorm, error comes from Node.js interpreter that runs your code. Node.js still doesn't support ES6 modules natively (actually, no JavaScript runtime currently supports them - ECMAScript does not define a "Loader" specification which determines how Modules are inserted into the runtime. The Loader spec is being defined by WHATWG, but is not yet finalized). So, to get ES6 imports/exports accepted, you need using transpilers. Current industry standard is Babel
The most simple way to make it work is the following:
install babel in your project using npm install --save-dev babel-cli babel-preset-env
create a .babelrc file in project root dir:
{ "presets": ["env"] }
in your Node.js Run configuration, pass -r babel-register to Node:
With this configuration, your code will be transpiled on-the-fly by Babel, no file watchers, etc. are needed
I'm working on creating an ember addon, and I'm a bit stuck trying to write tests for it. This addon implements a command line option, rather than shipping components etc. As a result, none of the moduleFor type test helpers are relevant for me in the out of the box qunit tests. I'm not rendering any components, I just want a test runner to exersize the implementation behind my command line option.
To write my tests, I'll need to just require my various source files that are up in my addon. For example, files sitting in root/lib. I can't get a require/import that can find these files in a qunit integration test under root/tests/integration. Is this possible? I need a relative path like:
import foo from '../../../lib/foo'
But nothing up there seems to work. The folder structure created for an addon is like:
root
app
lib (was planning on putting my addon impl here)
tests
dummy
helpers
integration
example-test.js (trying to reference code out of the lib folder from here)
It seems like my options in this case are just to fall back to some plain old JS unit testing (qunit, jasmine etc), based up in the root of the addon, not using any ember magic or the dummy app. I would like to stay on the 'out of the box' path provided by ember generate addon, but it seems like I need to go my own way here, so I can reference my source files.
Use
import foo from 'myApp/lib/foo'
I have an ember app, and a folder with a file playGame/game.js. This file includes game logic, and I want to import it for asset compilation.
If this file is under app/playGame/game.js and my Brocfile is like this:
app.import('app/playGame/game.js')
this gives the error, path or pattern app/playGame/game.js didn't match any files..
but if I put the file under bower_components/playGame/game.js and my Brocfile:
app.import('bower_components/playGame/game.js'), this compiles successfully.
What is the problem and solution here?
There are two parts to this:
Where should I put my file to import it as an asset?
Why isn't putting it in my app-folder working?
The way to do what you want is to create a folder called vendor in your root, put the file somewhere in there, and then import it in your Brocfile.js like so:
app.import('vendor/playGame/game.js');
This is documented on ember-cli.com, although somewhat hidden.
You could also put it in bower_components, but that folder is for things installed with bower, and could theoretically be deleted (in fact, this is a common recommendation to various issues). Things in bower_components is also not checked in to version control by default, which you probably want to do in this case.
This should solve your issue.
Now, why doesn't it work to put it in /app?
app is a special folder. From the documentation:
Contains your Ember application’s code. Javascript files in this
folder are compiled through the ES6 module transpiler and concatenated
into a file called app.js.
This is what makes it possible for you to import stuff from within your app. The folders in app is available directly under your <appname> namespace, along with some other files and folders like config/environment.
Example:
import myWidget from 'my-app/widgets/my-widget';`
The referenced file is /app/widgets/my-widget.js.
The ember-cli website has some more resources for how to use modules. Read those if this doesn't make any sense.
To sum up:
You could put your file in app, but that would make it part of your transpiled package, and you'd have to use it that way internally with an export and everything else that comes with it. It would end up as part of <appname>.js
You could put your file in vendor and import it in your Brocfile.js as explained above. It would be part of vendor.js and load before your app code.