Develop Reference

"ERROR in xx.js from UglifyJs Invalid assignment" when importing a module into another module

I cannot post exact code due to NDAs, so I will do my best.
Javascript is not my string suit, but I took it up for my team.
Background:
I built a module which basically will perform a very simple task and can be imported as a dependency in other projects and then added into the project by adding the tag.
I wanted to keep this as lightweight as possible and let the app which was adding it in do the heavy lifting and have the imports to run and compile Angular code.
Code for SimpleApp:
Everything seems to work fine except for places marked with /* Potential Issue */
Within the simple module, I have a few file:
simpleApp.js -- the main js file which does the work necessary
simpleApp.html -- the html of simpleApp.js
innerProvider.js -- a module.service which does some work when called from the simpleApp.js -- this import seems to be the issue causer.
All within the companySimpleApp package:
simpleApp.js:
import angular from "angular"
/* I believe this to be the issue */
import innerProviderModule from "./pathToFile/innerProvider /* Potential Issue */
/* Potential Issue */
angular.module('simpleApp', [innerProviderModule]).component('simpleComponent, {
controller: ['$scope, 'innerProvider', ..., function($scope, innerProvider, ...) {
/* does work */
}],
template: require("./simpleApp.html"),
bindings: {
bind1: '#',
bind2: '#'
}
simpleApp.html:
<div>
do stuff
call stuff
</div>
innerProvider.js:
import angular from "angular"
const innerProviderModule = angular.module('innerProvider', [])
.service('innerProvider', function (%http, ...) {
this.doWork = function (param1) {
retStmt = doSomething(param1)
return retStmt
}
});
export default innerProviderModule.name;
Everything here builds correctly and will do as is told. I am able to build this package as well as the one which uses it and have a working webpage with the simpleApp's services. However, this is when I host everything myself.
Code for Larger Service using SimpleApp:
In another project I have this listed as a dependency "simpleApp = 1.0" this may be different than expected due to my company's internal workings, but this works.
It appears in the node_module directory
I then have a module for the webpage which loads in simpleApp and has all of the other packages like angular, babel, uglify, webpack, etc:
/* Potential Issue */
import "companySimpleApp/simpleApp.js"
export default angular
.module("app", [otherDependencies, simpleApp])
.config(function ($stateProvider, $stuff){
someMappingsForUrls
});
...
<script src="../node_modules/companySimpleApp/simpleApp.js"></script>
...
and another html and js file which use the simpleApp
<div>
<simpleApp bind1='{{value}}'></simpleApp>
</div>
Error:
Now, everything will run fine on my localhost and I can fully use the larger service using SimpleApp site with the simpleApp. However, when I build this (npm run webpack) on the service using simpleApp, I get the following error even though everything seems to run fine on my localhost:
ERROR in bundle.js from UglifyJs
Invalid assignment [bundle.js:146461,67]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # webpack: `webpack -p`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
........
The code seems to build when I remove the import innerProviderModule from "./pathToFile/innerProvider from simpleApp.js but I then get an error saying that innerProvider is an unresolved reference or something along the line.
What I am asking is for some help on why I may be seeing this error when I import the innerProviderModule I built. Do I need to add webpack and all that to my simpleApp project even though it all seems to run fine physically on my localhost?
Any help or ideas is very much so appreciated. Thanks!
Bumping this as I posted it late at night.
Edit: It seems to not like "=>" in the innerProvider which I have

I built the package which uses the simpleApp with 'webpack -p' which was not done on simpleApp. So, what it looked like that happened was that the simpleApp was not minified or something and didnt like a few lines in the provider code (ie: "=>", "let", etc...)
So instead of having the simpleApp have more dependencies, I simply wrote code which would pass webpack -p.
You should also be able to just remove the "-p" flag
Hope this helps someone.

Bootstrap v4 runtime/load error in Aurelia

I have the following in my aurelia.json file, among the rest of what you'd usually find. I copied it directly from the reference implementation, and as you'd therefore expect, it works fine.
{
'build': {
'bundles': [
'name': 'vendor-bundle.js'
'dependencies': [
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
]
]
}
}
However, I'm trying to migrate to Bootstrap 4, and it just doesn't seem to be working. In order to update the package, I've tried changing build.bundles.dependencies[].path to ../jspm_packages/github/twbs/bootstrap#4.0.0-beta as well as to ../node_modules/bootstrap-v4-dev/dist, but it doesn't change the error code or make the error manifest any less. I've also tried copying the v4 files into the dist folder for v3, which also causes the same problem.
Build is always clean; the error occurs at run-time:
DEBUG [templating] importing resources for app.html
Uncaught TypeError: plugin.load is not a function
Unhandled rejection Error: Failed loading required CSS file: bootstrap/css/bootstrap.css
EDIT:
Thanks to Ashley Grant's answer, I have updated Bootstrap through NPM, obviating any changes to aurelia.json. The error remains unchanged, which would seem to indicate a bug were it not for the fact that other people have successfully performed this migration without errors using the same toolchain.
EDIT2:
I've created steps to reproduce the bug:
$ au new
name # can be any valid value
2 # Selects TypeScript as the language
1 # Create project structure
1 # Install dependencies
cd into the project directory.
Add the two entries listed above to build.bundles[1].dependencies in aurelia_project/aurelia.json
$ npm install jquery --save
$ npm install bootstrap#^4.0.0-beta --save
Change src/app.html to the following:
<template>
<require from="bootstrap/css/bootstrap.css"></require>
</template>
Finally, execute either of the following and browse to the provided URL.
$ au run
OR
$ au build
$ serve
This yields the errors described in both Google Chrome Version 55.0.2883.87 (64-bit) and Mozilla Firefox 55.0.3 on my Arch Linux systems. I've not yet had the opportunity to test it on other systems.
Edit3:
Thanks to #vidriduch, everything appears to be working. However, if you look at the console, you find the following:
Uncaught SyntaxError: Unexpected token export
vendor-bundle.js:3927Uncaught Error: Mismatched anonymous define() module: [entirety of vendor-bundle.js printed here]
These are the two very first messages when the page loads in debug mode, but no other errors arise.

You are missing popper.js dependency for Bootstrap 4.0.0-beta.
In order for Aurelia to accept this add
"node_modules/popper.js/dist/umd/popper.js"
on the top (as per comment from #hxtk) of prepend part of aurelia.json (assuming that you are using RequireJS, otherwise have a look at webpack dependency linking for Bootstrap https://getbootstrap.com/docs/4.0/getting-started/webpack/)
Just to mention, the version of popper.js you need to install is 1.11.0 (https://github.com/twbs/bootstrap/issues/23381), so
npm install popper.js#1.11.0
or
yarn add popper.js#1.11.0
and it should work :)

Your aurelia.json configuration is correct. I'm going to guess you never ran npm install bootstrap#^4.0.0-beta --save as you are mentioning copying files in to a versioned node_modules folder, and NPM doesn't use versioned folders like JSPM does.
So run npm install bootstrap#^4.0.0-beta --save and things should start working. I have your exact configuration working in an application for one of my clients.

Electron require node_modules in main process: Error: Cannot find module ‘linvodb3’

For a angular2/electron learning app I use LinvoDB for persistent data storage based on the angular2-electron-starter seed that comes with two package.json one in root/ one in root/electron. After successful packaging the app.exe throws this error:
A JavaScript error occurred in the main process
Uncaught Exception:
Error: Cannot find module 'linvodb3'
So far I tried:
installing linvodb3 in / and /electron (npm install linvodb3 --save)
installing linvodb3 with --build-from-source
using electron-rebuild in both directories
apm install
multiple deinstallations and
installations of various packages recommended at similar questions.
var LinvoDB = require('linvodb3'); in the according module and main.js
const LinvoDB = require('electron').remote.require('linvodb3');
var LinvoDB = require('linvodb3'); in index.html similar to the jQuery questions.
The only thing I read about and couldn't try was to set the NODE_PATH manually cause I couldn't find a file where it's specified.

As suggested by #JensHabegger the initial problem can be solved by copying the node_modules from the /electron subfolder to /dist, I do this by a script in the /package.json.
The deeper problem of the not found leveldown lib couldn't be fixed with electron-rebuilt but with a postinstall script in /electron/package.json:
"scripts": {
"start": "electron .",
"postinstall": "cd node_modules/leveldown && node-gyp rebuild --target=1.4.8 --arch=x64 --dist-url=https://atom.io/download/atom-shell"
},

how to add react jsx as javascript file type in vim and enable eslinting, auto completions?

I have recently started using vim.I want to set up files having .jsx extension to be treated as .js java script file in Vim.
Also I want to enable es-linting, snippets with my .jsx files. I have installed following packages in my system
npm install -g eslint
npm install -g babel-eslint
npm install -g eslint-plugin-react
I have also installed Bundle 'mxw/vim-jsx' to support jsx in vim.
Also added following lines in my .vimrc file
let g:syntastic_javascript_checkers = ['eslint']
let g:jsx_ext_required = 0
Edit
Found this vim plugin for react snippets:
Vim-react-snippets

I decided to write this tutorial to setup vim for React development in depth so that beginners find this useful when they start with vim and react.
Syntax highlighting
To get the jsx syntax high-lighting to look right in vim, use mxw's Vim JSX plugin.
Steps to Install mxw/vim-jsx Plugin
If you use Vundle,
add following lines in your .vimrc:
Plugin 'mxw/vim-jsx'
Plugin 'pangloss/vim-javascript'
This plugin depends upon pangloss/vim-javascript so you need to install that as well.
To install from within vim, use the commands below.
:so ~/.vimrc
To source changed .vimrc configuration file and use it, next
:PluginInstall
If you use pathogen
cd ~/.vim/bundle
git clone https://github.com/mxw/vim-jsx.git
Enable JSX Syntax Highlighing in javascript files
Add following lines in your .vimrc:
let g:jsx_ext_required = 0
Enabling eslint in vim
You need to install following helper npm packages along with latest eslint ( used 2.11.1 at the time of writing ).
Also make sure that you have node.js version 4 or above installed in your system.
babel-eslint - To support ES6 linting
eslint-plugin-react - React specific linting rules for ESLint
e.g prevent usage of setState in componentDidMount
npm install --save-dev eslint
npm install --save-dev babel-eslint
npm install --save-dev eslint-plugin-react
I decided to use common practices and conventions used by AirBnB, so I installed following packages as well. But You don't need them
If you do not want to use AirBnB eslint presets.
npm install --save-dev eslint-config-airbnb
npm install --save-dev eslint-plugin-import
npm install --save-dev eslint-plugin-jsx-a11y
Create a config file .eslintrc.json in your project's root:
(You can use eslint to generate eslint configuration file in intreactive way)
eslint --init
(If you chose any presets make sure you also install required package for that lint preset)
I extended "airbnb" but overrided some of rules for my project. You can use
"extends": "eslint:recommended" to enable some common lint rule recommended by eslint
Here is my .eslintrc.json file
{
"extends" : "airbnb",
"parser" : "babel-eslint",
"parserOptions" : {
"ecmaVersion" : 6,
"sourceType" : "module",
"ecmaFeatures" : {
"jsx":true
}
},
"env": {
"browser" : true,
"node" : true,
"jquery" : true
},
"settings":{
"react":{
"pragma":"React",
"version":"15.1.0"
},
"ecmascript":6,
"jsx":true
},
"plugins": [
"react"
],
"rules": {
"strict": 0,
"quotes": 0,
"no-unused-vars": 1,
"camelcase": 1,
"no-underscore-dangle": 1,
"comma-dangle":[1,"never"],
"indent":["error",4],
"react/jsx-indent":0,
"react/jsx-equals-spacing": [2, "always"],
"no-console":0,
"max-len":1,
"no-param-reassign":1,
"key-spacing": [
2,
{
"align": "colon",
"beforeColon": true,
"afterColon": true
}
],
"no-multi-spaces": [
2,
{
"exceptions":{
"VariableDeclarator":true,
"ImportDeclaration":true,
"JSXAttribute":true,
"AssignmentExpression":true
}
}
]
}
}
Now integrate ESLint with Syntastic Plugin in Vim
I decided to use Syntastic with vim for syntax error checking.
let g:syntastic_javascript_checkers = ['eslint']
All set but still there is one issue remaining with Syntastic.
Syntastic searches global node_modules instead of local project.
One solution will be install all packages eslint, babel-eslint etc globally which definately will not be a good practice.
Another solution is
Define a npm script in your package.json
"eslint": "eslint -c .eslintrc.json"
It will add all the locally installed npm packages in current path, so they will be available for execution.
And in your .vimrc file add
let g:syntastic_javascript_eslint_exe = 'npm run eslint --'
Here we are invoking linting via npm script from vim.
Alternative: use Plug 'mtscout6/syntastic-local-eslint.vim' plugin
Open error window in vim as you open your file -
Add following lines to your .vimrc to show current lint error (in case any) as you open your file for edit
let g:syntastic_always_populate_loc_list = 1
let g:syntastic_auto_loc_list = 1
let g:syntastic_check_on_open = 1
let g:syntastic_check_on_wq = 0
Snipptes and auto-completion
There are different forks of snippet engines which allow the user to insert snippets by typing the name of a snippet hitting the expansion mapping.
github.com/SirVer/ultisnips:
python, supports all snippets in this repo.
github.com/garbas/vim-snipmate:
VimL, snipmate-snippets, engine sometimes behaves strange. Supports snippets/*
github.com/Shougo/neosnippet:
VimL, supports snippets/* with some configuration.
github.com/drmingdrmer/xptemplate: Totally different syntax, does not read snippets contained in this file, but it is also very powerful.
I prefer neosnippet. Install it in your vim, to enable snippets with neocomplete for auto-completion.
Neocomplete is an amazing autocomplete plugin with additional support for snippets. It can complete simulatiously from the dictionary, buffer, omnicomplete and snippets. This is the one true plugin that brings Vim autocomplete on par with the best editors.
See install instructions here for neocomplete
After installing above plugins you need to install one more plugin to enable react specific snippets
Bundle 'justinj/vim-react-snippets'
See install instructions here for that plugin.
If all setup done correctly, you have enabled vim with eslinting, auto completions, JSX syntax hightlighting for React, with ES6 features !
Taken from my blog post.

That plugin you installed already sets the filetype of .jsx files to javascript.jsx so those files should be treated as if their filetype was javascript plus any jsx-related feature provided by that plugin.
I have no idea how to set up Syntastic for jsx, but you can get linting without installing such a huge plugin. For that you will need to add the lines below to after/ftplugin/jsx.vim to tell Vim to automatically run eslint after a write:
" see :help 'errorformat'
setlocal errorformat=%E%f:\ line\ %l\\,\ col\ %c\\,\ Error\ -\ %m,%-G%.%#,%W%f:\ line\ %l\\,\ col\ %c\\,\ Warning\ -\ %m,%-G%.%#
" see :help 'makeprg' and $ eslint --help
setlocal makeprg=eslint\ -f\ compact
" run :make % on write
autocmd! BufWritePost <buffer> silent make % | silent redraw!

JSPM - jspm install gives error "Registry not found"

Recently i started playing with aurelia-framework and so far so good but when i edited config.js to add some of my files that are not installed via jspm things worked fine i was importing my scripts no errors but when i cloned to another machine and run jspm install it fails cause it does't like that i have other paths other than npm and github in my config.js
Configjs
paths: {
"*": "dist/*",
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*",
"lib:*": "lib/*",
"styles:*": "styles/*"
},
map: {
"app-styles": "styles:app-styles",
"uisearch": "lib:uisearch/uisearch#1.0.0",
"component": "lib:component/component",
"classie": "lib:classie/classie#2.0.0",
"material": "lib:material/material",
"ripples": "lib:ripples/ripples",
"bootstrap-select": "lib:bootstrap-select/bootstrap-select#1.7.2"
other deps...
}
Error Message
err Registry lib not found.
err Unable to load registry lib
warn Installation changes not saved.
Please help am new to this :)

Avoid making changes to the map section of your config.js by hand. Instead use the jspm command line interface to add packages. The jspm CLI will maintain your config.js for you. For example, to add classie to your project you would execute the following:
jspm install npm:desandro-classie
More information at jspm.io.
Note: you don't need to edit the config.js to enable importing javascript/css that is part of your project.
If I'm interpreting your original post correctly you have a lib folder containing a ripples subfolder which has a ripples.js file inside of it. You could access this "ripples" module like this:
import ripples from 'lib/ripples/ripples';
ripples.foo();
...