What is the correct way to use Ember js with three.js. I have tried using it with cdn by editing the index.html file which works fine but i get warning in ember-cli about THREE not being defined. Also installing it with bower and using app.import gave me similar warnings.
The app works all fine but i wanted to know what is the best way to import in this case three.js into an ember application without the warnings.
That is a JSHint warning because it isn't aware of the global THREE variable you're trying to access. You have two ways to fix it:
Put a globals directive at the top of the file that uses the variable.
Setup .jshintrc's predef.
Hope this helps!
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 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
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.
We started introducing React to our large Django project to handle frontend complexity. So far, so good, but we ran into a problem.
React does not work in production on IE8. Locally it works fine on IE8. I've included es5-shim and es5-sham and I do see them in dev tools in production (included in the header, before React and code that's using React). But still, I get this error, like there's no shim:
SCRIPT438: Object doesn't support property or method 'isArray'
I also got:
SCRIPT438: Object doesn't support property or method 'bind'
after which I included script mentioned in this post:
How to handle lack of JavaScript Object.bind() method in IE 8
However, after that I get:
SCRIPT5023: Function does not have a valid prototype object
And I'm still getting the old errors. Again, locally it's working fine in IE8 so I'm guessing it's not the code itself that is the problem. Our app uses AWS CloudFront (but I do see the static .js files included in the html).
Any ideas what might be happening here?
I run into an issue where ember-i18n can be used with an ember-cli server running in development environment. But when I set --environment production I get the following error:
Error: The default Ember.I18n.compile function requires the full Handlebars. Either include the full Handlebars or override Ember.I18n.compile.
The error occurres because ember-cli includes Handlebars-production on production environment. Is there a solution for this problem?
I think I need to precompile the translations.
One way to fix this is to configure ember-cli to include the full handlebars version on production:
app.import({
development: 'vendor/handlebars/handlebars.js',
production: 'vendor/handlebars/handlebars.js'
});
A drawback is that the (much) bigger library is included in the build, only for my translations. I keep looking for a way to precompile my translations.
There is no way to get around importing the full handlebars when using ember-i18n. You do not need to specify the same string import for development and production though. Just add this to your Brocfile:
app.import('vendor/handlebars/handlebars.js');
I had exactly the same issue and this is the solution that Stefan Penner advised. https://github.com/stefanpenner/ember-cli/pull/675#issuecomment-47431195. Worked fine for me. One thing to note though, for some reason I had the import statement as the first import. When it was the last one it didn't seem to work. I didn't try anywhere in between though, or try to debug that issue.