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.
Related
to sum up my circumstances:
I am running everything locally
I am using flask in the backend within a virtual environment
Goal: build a socket connection between Flask Backend and JS Frontend
PROBLEM: the problem is in the Frontend which is based on JS where I can't import the modules I got with npm
I am importing the modules as follows:
import { io } from "socket.io-client"
import { Hands } from "/#mediapipe/hands"
I also tried different import variants such as import * as io from "socket.io-client" and I also tried importing directly files as follows: import {io} from "socket.io-client/dist/socket.io", but all without success as these lead to "not found" errors.
I am sure that I installed them correctly with npm as I can see them in the folder structure, but the es6 imports are throwing an error as follows:
Failed to resolve module specifier "socket.io-client". Relative references must start with either "/", "./", or "../" - To solve this I tried adding slashes to different places like in the html tag where I include the script I tried transforming "type="module"" to "type="/module"" as recommended somewhere online, but without success. Also building direct references in the imports like "./node_modules/socket.io-client" do not work as it states that the file/folder is not found.
The problem must be the usage of the imports as everything works when I use Content Delivery Networks which also lets me assume that the version of the packages is not the problem as the version I get from the CDN is the same, but still the versions I use:
socket.io-client: 4.6.0
#mediapipe/hands: 0.4.1675469240
Flask: 2.2.3
Flask-SocketIO: 5.3.2
npm: 8.19.3
node: 16.19.1
My folder structure is as follows:
venv
main.py
templates
index.html
static
node_modules (includes socket.io-client and #mediapipe/hands)
js
main.js (the js file where the problem occurs)
package.json
I read a few times that the usage of "Webpack" is recommended, but I would like to skip that currently as I am not very familiar with that, so one question would also be: is it necessary to use it?
What can I possibly do wrong or how can I track my problem when it is about the import of es6 modules?
I would appreciate any help. Thanks in advance!
I could solve my problem for the socket.io-client package:
For the socket.io-client I imported a specific file directly although I do not really know why it worked as follows:
import { io } from './node_modules/socket.io-client/dist/socket.io.esm.min.js'
For the mediapipe package I still could not import the module in my js file directly and I am still relying on CDN. I tried the same thing in the same way by using:
import * as Hands from './node_modules/#mediapipe/hands/hands.js'
This, at least, does not result in an error, but the usage of "Hands" in this case is unclear to me as there is also no documentation for this use case in the mediapipe-js documentation. I could not directly import the {Hands} function as it resulted in an error saying "there is no function Hands in that path"
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.
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!