I am trying to add rainbow code samples to my ember project. I installed rainbow through bower and it works locally. However when I build and deploy to staging I am getting JS console errors.
As far as I can tell this is the minified version of this. It appears to me that for some reason the Prism class is not being included when it is minified. I am importing
'rainbow/dist/rainbow.min.js',
'rainbow/src/language/generic.js',
'rainbow/src/language/r.js',
'rainbow/src/language/python.js',
'rainbow/src/language/json.js',
'rainbow/src/language/html.js'
in my ember-cli-build.js using
bowerDependencies.forEach(function(path) { app.import(app.bowerDirectory + '/' + path); });.
If I build with minify off it works wonderfully, but I would like to minify the JS. I am currently at a loss of why these files are not being included.
Use ./rainbow/dist/rainbow.min.js for al the file inclusion.
Refer :
https://github.com/ember-cli/ember-cli/issues/6829
Related
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 working on an Ember.js project and would like to leverage the Slick Carousel library. I've installed the library via Bower in my project folder, and am having difficulty with importing it into my project.
In my ember-cli-build.js, I've added import statements as follows:
app.import('bower_components/slick-carousel/slick/slick.css');
app.import('bower_components/slick-carousel/slick/slick-theme.css');
app.import('bower_components/slick-carousel/slick/slick.js');
The issue I am running into is that the rest of the required assets do not get built and included in the dist folder when I do a build (fonts, assets, etc.), leading to errors with missing fonts and assets that are present in the "bower_components/slick-carousel" folder, but not in the build of my actual Ember application.
Edit: It looks like Broccoli-Funnel was what I needed. The issue was resolved by specifying the source files from the 'bower_components' folder and pointing the relative path to the 'dist' folder in the ember-cli-build.js file.
As a note: The 'broccoli-static-compiler' plugin commonly referenced elsewhere as the solution is deprecated, with the use of 'broccoli-funnel' as the recommended plugin.
Broccoli-funnel ended up being what I was looking for. By placing the following inside of ember-cli-build.js, the needed files would be placed in the correct directory during build:
var Funnel = require('broccoli-funnel');
var requiredAssets = new Funnel('bower_components/slick-carousel/slick/fonts', {
srcDir: '/',
include: ['**/*.*'],
destDir: '/assets/fonts'
});
return app.toTree([requiredAssets]);
Currently we are not using require tree in our app so as to only load js via their individual controllers, we found that require tree was loading all kinds of crazy nonsense. All help is appreciated. Vendor JS seems to be loading...
No idea how to fix this and I've also tried the following.
ASSETS.RB
Rails.application.config.assets.paths += Dir["#{Rails.root}/vendor/assets/*"].sort_by { |dir| -dir.size }
APPLICATION.RB
config.sass.load_paths << File.expand_path('../../vendor/assets/stylesheets/')
Turns out it's not an error with the rails pipeline, it's an error with sass and loading css. All you need to do is change your .css files to .scss and they all start loading properly.
On the sass github it does state that it is something they are looking at bringing into their 4.0 release but as of this date it does not work.
It turned out there were a few more errors but those were fixed by changing a false to true in environments/production.rb for the following line.
config.assets.compile = true
Leaving assets as compile true will effect load times.
when I want to build my ember electron app with ember electron:package
I always get the error:
Build failed.
File: assets/vendor.js (91129:6)
The Broccoli Plugin: [UglifyWriter] failed with:
followed by several lines of "Error at...:" (always within node_modules)
I could figure out that it must have something to do with ember-browserify.
I am importing this node module in a service.js file:
import Usabilla from 'npm:usabilla-api';
The curious thing is, that with ember electron (like ember serve) everything is fine and I can use the node module without any errors. Issues only occur when I want to package the app to the .dmg and exe files for distribution.
What am I missing ?
Thanks for any help or hints!
Your build is failing on the minification step. Possibly because of the size of one of the packages you're pulling in or because it's already been minified. Minification only happens when you're building for production or packaging which is why you're not seeing the issue when you run locally.
From the EmberCLI docs on minification, where you'll find more on the minifaction step:
the js-files are minified with broccoli-uglify-js in the production-env by default. You can pass custom options to the minifier via the minifyJS:options object in your ember-cli-build
You can exclude specific files/resources that are causing problems:
To exclude assets from dist/assets from being minificated, one can pass options for broccoli-uglify-sourcemap
I just create the demo app in c drive and it's working perfectly.
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.