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.
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"
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 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.
I have followed the ember-cli instructions for referencing the master branch in development.
It works fine when I use a new ember project.
However when I try linking to an existing ember project i get this kind of error:
Merge error: file "bootstrap/.bower.json" exists in vendor and vendor - pass option { overwrite: true } to mergeTrees in order to have the latter file win
I have tried everything to get rid of this (i.e. clone repository, and initialize things one step at a time.
The occurs once I install stefanpenner/loader.js#1.0.1
Fundamental problem is that vendor directory has changed to bower_components directory.
this leaves the .bowerrc file pointing to "vendor" which seems to cause the problem.
make sure to - delete .bowerrc file or update it so it points to bower-components
This will happen as long as you do everything in the right order
go to directory containing your working copy (master) of ember-cli
npm link
go to your code directory
npm link ember-cli
ember init (make sure to update .bowerrc, and update/merge .gitignore, bower.json, package.json)
you should be good to go
The problem I was having was running bower install BEFORE ember init (per the ember-cli web page)
This was installing stuff in the vendor directory, so you end up with duplicates.
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.