I'm using JSPM 0.16.42 which uses SystemJS, I've tried both angular-translate and angular-route, both of which are on github endpoints.
However, for both of them angular throws the same error
argument module is not a function
when using them in ES6 syntax as follows:
import AngularRoute from 'angular-route';
angular.module('app', [AngularRoute]);
I'm using babel as a transpiler. The object I get back from the import seems to be empty. Following is the relevant part of my config.js file:
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"optional": [
"runtime",
"optimisation.modules.system"
]
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
map: {
"angular-route": "github:angular/bower-angular-route#1.5.8",
"angular-translate": "github:angular-translate/bower-angular-translate#2.11.1",
}...
EDIT: When I tried to install angular-translate with an npm endpoint I got the error http://errors.angularjs.org/1.5.8/$injector/unpr?p0=e
on the following line in angular.js
return new ErrorConstructor(message);
which I guess is a bit of progress but still doesn't solve my issue obviously
EDIT#2: I got angular-route to work with the help of #artem by using the npm endpoint, for some reason the github endpoint did not work so I used jspm install npm:angular-route. Further investigation is needed as to why the github package did not work and the npm package did
EDIT#3: I have overriden the package configuration as you can see below, though that didn't help
"npm:angular-translate#2.11.1": {
"format": "global",
"dependencies": {
"angular": ">=1.2.26"
},
"shim": {
"angular-translate": {
"deps": "angular"
}
}
}
I eventually fixed it by installing angular-translate as well as angular-route via their npm endpoints instead of the default (github) endpoints, using
jspm install npm:angular-route
&
jspm install npm:angular-translate -o '{dependencies: { angular: ">=1.2.26" } }'
The override for angular-translate was needed since jspm did not understand the original dependency syntax correctly which was angular: ">= 1.2.26 <=1.6" as described in this github issue
Here is not-so-minimal, not-really-self-contained example for angular-translate with systemjs:
npm install jspm
./node_modules/.bin/jspm install github:angular-translate/angular-translate
keep pressing <ENTER>, accepting all the default values
create file test.js
import AngularTranslate from 'angular-translate/angular-translate';
console.log(AngularTranslate);
create file index.html
<!doctype html>
<html>
<head>
<script src="jspm_packages/system.src.js"></script>
<script src="config.js"></script>
<script>
System.import('./test.js');
</script>
</head>
<body>
</body>
</html>
open it in the browser:
Failed to load resource: the server responded with a status of 404 (File not found)
undefined:1 Uncaught (in promise) Error: (SystemJS) XHR error (404 File not found) loading
http://localhost:8035/jspm_packages/github/angular-translate/angular-translate#2.11.1.js(…)
Why that file isn't there? It's supposed to be created by jspm, if you had installed angular-translate from npm it would have contained
module.exports = require("npm:angular-translate#2.11.1/dist/angular-translate.js");
which is just a redirect from symbolic package name (the name of that .js file) to that package main file, as specified in package.json:
"main": "dist/angular-translate.js",
But angular-translate is from github, there is no dist there. That's why jspm did not create the redirect file - there is nothing to redirect to.
No problem, just build it from the source we got from github:
cd jspm_packages/github/angular-translate/angular-translate#2.11.1/
npm install
npm run-script build
cd ../../../..
and fix mapping in config.js:
map: {
"angular-translate/angular-translate": "github:angular-translate/angular-translate#2.11.1/dist/angular-translate",
open index.html in the browser again:
system.src.js:122 Uncaught (in promise) Error: (SystemJS) angular is not defined(…)
No problem, angular is already installed as angular-translate dependency, just tell systemjs when and how to load it.
add to config.js:
meta: {
"angular-translate/angular-translate": {
"deps": ["angular"]
}
},
map: {
"angular": "github:angular-translate/angular-translate#2.11.1/node_modules/angular/angular",
NOTE: You don't need to specify format for angular-translate. SystemJS auto-detects it correctly - it could be loaded as either 'amd' or 'cjs', but it will not work as 'global'. Also, you probably did not start by installing angular-translate, so you already have angular.js file and mapping in place somewhere.
Open index.html in the browser again. It prints in the console:
pascalprecht.translate
Yes angular-translate exports a string - seems to be typical for angular1 modules.
I have no experience with angular.js, so I declare it a success and stop here.
PS Why angular-route worked when you install it from npm, and did not work from github?
When installed from npm, jspm created a file named jspm_packages/npm/angular-route#1.5.8.js, containing
module.exports = require("npm:angular-route#1.5.8/index.js");
because package.json for angular-route has
"main": "index.js",
which is correct and works for you.
When installed from github, jspm created similar file jspm_packages/github/angular/bower-angular-route#1.5.8.js, but this time it points to a different file
module.exports = require("github:angular/bower-angular-route#1.5.8/angular-route");
because someone put an override in jspm registry there at https://github.com/jspm/registry/blob/master/package-overrides/github/angular/bower-angular-route%401.3.0.json
because bower.json for bower-angular-route has
"main": "./angular-route.js",
Maybe it's an oversight, maybe it's correct and works for them - I don't know.
TL;DR It's not a good idea to use package manager for installing software, if the software was not packaged properly for that package manager.
Related
I am getting this error when trying to build a Clojurescript project with shadow-cljs. I've tried looking for syntax errors as described here but I can get the same the error with a single line and a single import although not all imports cause the same error.
This compiles:
(ns campfire.core)
(defn init [] (println "ok"))
This doesn't:
(ns campfire.core
(:require ["bugout" :as b]))
(defn init [] (println "ok"))
The output from the above example is:
shadow-cljs - config: /home/ru/Projects/campfire/shadow-cljs.edn
shadow-cljs - HTTP server available at http://localhost:3000
shadow-cljs - server version: 2.11.18 running at http://localhost:9630
shadow-cljs - nREPL server started on port 8777
shadow-cljs - watching build :frontend
[:frontend] Configuring build.
[:frontend] Compiling ...
[:frontend] Build failure:
The required JS dependency "readable-stream/writable.js" is not available, it was required by "node_modules/stream-browserify/index.js".
Dependency Trace:
campfire/core.cljs
node_modules/bugout/index.js
node_modules/bs58check/index.js
node_modules/create-hash/browser.js
node_modules/cipher-base/index.js
node_modules/stream-browserify/index.js
Searched for npm packages in:
/home/ru/Projects/campfire/node_modules
See: https://shadow-cljs.github.io/docs/UsersGuide.html#npm-install
package.json
{
"name": "campfire",
"version": "0.0.1",
"private": true,
"scripts": {
"build": "shadow-cljs release frontend"
},
"devDependencies": {
"shadow-cljs": "2.11.18"
},
"dependencies": {
"bugout": "^0.0.10",
"webtorrent": "^0.114.1"
}
}
shadow-cljs.edn
{:source-paths
["src/dev"
"src/main"
"src/test"]
:dependencies
[]
:dev-http {3000 "public"}
:nrepl {:port 8777}
:builds
{:frontend
{:target :browser
:modules {:main {:init-fn campfire.core/init}}}}}
I've seen similar build errors that were fixed by clearing .shadow-cljs etc and rebuilding but nothing like that seems to be helping. I'm new to shadow so apologies if this is something obvious. Does anyone have any idea what's going on here?
Update
So it looks like what's happening is that stream-browserify 2.0.2 requires readable stream ^2.0.2 which npm installs in the nested node_modules folder. Elsewhere readable-stream 3.6.0 is being installed in top level node_modules. Shadow is trying to resolve writer.js against the 3.6.0 version of readable stream instead of the 2.0.2 version.
Confusingly though, stream-browserify isn't a dependency of cipher-base as given in the dependency trace but of node-libs-browser which is itself a dependency of shadow-cljs.
Is it possible that this is a bug in shadow or is it expected behaviour?
Update 2
I've created an example repo that replicates what I'm seeing as simply as I can here.
Did you actually install the shadow-cljs dependency in the project? Does the directory node_modules/shadow-cljs exist?
I see it listed in devDependencies so it should be installed but it might not be if you never actually called npm install in the project or npm is set to production mode which won't install devDependencies. All of this is part of the node-libs-browser package which seems to be missing as well and should have been installed due to being a dependency of shadow-cljs.
Based on the link in your first error message, it says to npm install whatever's missing.
If you didn't run npm install, that by itself will install what's in your package.json.
If that's not the issue, then npm i readable-stream may help.
firebase deploy is giving me this error message:
async function asyncFunction() {
^^^^^^^^
SyntaxError: Unexpected token function
Here's my code:
async function asyncFunction() {
await getText2Speech(word, 'mp3', 'es-ES_EnriqueVoice')
}
asyncFunction();
getText2Speech is a 75-line function that runs perfectly when I call it without async or await.
I have the Node.js 8 runtime in my functions/package.json:
"engines": {
"node": "8"
},
I have Node up to date on my computer:
node -v
v11.2.0
It seems odd that the unexpected token is function, not async. It seems that firebase deploy recognizes async but I have the syntax wrong? es-lint can't find anything wrong with my code.
Could the problem be this:
npm list --depth 0 -g
├── UNMET PEER DEPENDENCY firebase-admin#6.2.0
npm ERR! peer dep missing: firebase-admin#~6.0.0, required by firebase-functions#2.1.0
If I roll back to firebase-admin#~6.0.0 will async await work?
The problem was that something was pointing to eslint v4.5.0, which doesn't support ES2017. I had eslint v5.9.0 installed but eslint -v always returned v4.5.0. I used find . -name 'eslint' to remove every copy of eslint, there were lots of versions, all other my computer. npm uninstall -g eslint doesn't get every copy of eslint. When eslint -v returned nothing then firebase deploy worked.
async/await was deploying on my other computer, then today it stopped deploying. I checked the package.json in the functions folder on both computers, and both were missing
"engines": {
"node": "8"
},
Adding this line, both computers now deploy async/await. I don't know how this object dropped out of the package.json file, and I don't know if this fix will continue to work, but I'll cross my fingers!
I have this code:
"use strict";
import browserSync from "browser-sync";
import httpProxy from "http-proxy";
let proxy = httpProxy.createProxyServer({});
and I have installed babel-core and babel-cli globally via npm. The point is when I try to compile with this on my terminal:
babel proxy.js --out-file proxified.js
The output file gets copied instead of compiled (I mean, it's the same as the source file).
What am I missing here?
Babel is a transformation framework. Pre-6.x, it enabled certain transformations by default, but with the increased usage of Node versions which natively support many ES6 features, it has become much more important that things be configurable. By default, Babel 6.x does not perform any transformations. You need to tell it what transformations to run:
npm install babel-preset-env
and run
babel --presets env proxy.js --out-file proxified.js
or create a .babelrc file containing
{
"presets": [
"env"
]
}
and run it just like you were before.
env in this case is a preset which basically says to compile all standard ES* behavior to ES5. If you are using Node versions that support some ES6, you may want to consider doing
{
"presets": [
["env", { "targets": { "node": "true" } }],
]
}
to tell the preset to only process things that are not supported by your Node version. You can also include browser versions in your targets if you need browser support.
Most of these answers are obsolete. #babel/preset-env and "#babel/preset-react are what you need (as of July 2019).
I had the same problem with a different cause:
The code I was trying to load was not under the package directory, and Babel does not default to transpiling outside the package directory.
I solved it by moving the imported code, but perhaps I could have also used some inclusion statement in the Babel configuration.
First ensure you have the following node modules:
npm i -D webpack babel-core babel-preset-es2015 babel-preset-stage-2 babel-loader
Next, add this to your Webpack config file (webpack.config.js) :
// webpack.config.js
...
module : {
loaders : [
{
test : /\.js$/,
loader : 'babel',
exclude : /node_modules/,
options : {
presets : [ 'es2015', 'stage-2' ] // stage-2 if required
}
}
]
}
...
References:
https://gist.github.com/Couto/6c6164c24ae031bff935
https://github.com/babel/babel-loader/issues/214
Good Luck!
As of 2020, Jan:
STEP 1: Install the Babel presets:
yarn add -D #babel/preset-env #babel/preset-react
STEP 2: Create a file: babelrc.js and add the presets:
module.exports = {
// ...
presets: ["#babel/preset-env", "#babel/preset-react"],
// ...
}
STEP 3:- Install the babel-loader:
yarn add -D babel-loader
STEP 4:- Add the loader config in your webpack.config.js:
{
//...
module: [
rules: [
test: /\.(js|mjs|jsx|ts|tsx)$/,
loader: require.resolve('babel-loader')
]
]
//...
}
Good Luck...
npm install --save-dev babel-preset-node5
npm install --save-dev babel-preset-react
...and then creating a .babelrc with the presets:
{
"presets": [
"node5",
"react"
]
}
...resolved a very similar issue for me, with babel 3.8.6, and node v5.10.1
https://www.npmjs.com/package/babel-preset-node5
https://www.npmjs.com/package/babel-preset-react
Same error, different cause:
Transpiling had worked before and then suddenly stopped working, with files simply being copied as is.
Turns out I opened the .babelrc at some point and Windows decided to append .txt to the filename. Now that .babelrc.txt wasn't recognized by babel. Removing the .txt suffix fixed that.
fix your .babelrc
{
"presets": [
"react",
"ES2015"
]
}
In year 2018:
Install following packages if you haven't yet:
npm install babel-loader babel-preset-react
webpack.config.js
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015','react'] // <--- !`react` must be part of presets!
}
}
],
}
Ultimate solution
I wasted 3 days on this
import react from 'react' unexpected identifier
I tried modifying webpack.config.js and package.json files, and adding .babelrc, installing & updating packages via npm, I've visited many, many pages but nothing has worked.
What worked? Two words: npm start. That's right.
run the
npm start
command in the terminal to launch a local server
...
(mind that it might not work straight away but perhaps only after you do some work on npm because before trying this out I had deleted all the changes in those files and it worked, so after you're really done, treat it as your last resort)
I found that info on this neat page. It's in Polish but feel free to use Google translate on it.
I'm using protractor with jasmine-reporters 2.0.7
I tried to use the modifySuiteName option to modify suite names.
This is what in my conf.js:
multiCapabilities: [{
browserName: 'firefox'
}, {
browserName: 'chrome'
}],
onPrepare: function() {
var jasmineReporters = require('jasmine-reporters');
return browser.getProcessedConfig().then(function(config) {
var browserName = config.capabilities.browserName;
jasmine.getEnv().addReporter(
new jasmineReporters.JUnitXmlReporter({
savePath: 'c://scripts',
filePrefix: browserName,
consolidateAll: true,
modifySuiteName: function(generatedSuiteName, suite) {
return browserName+ '.' + generatedSuiteName;}
}));
});
},
I suppose to see
testsuite name="chrome.Demo App"
in chrome.xml
and
testsuite name="firefox.Demo App"
in firefox.xml
But I can only see
testsuite name="Demo App"
in both files.
Is there anything wrong in my code?
Okay now I figure out that my issue is caused by a stupid mistake.
I'm using windows 8 and running cmd under the folder c:\scripts.
I'm so new to nodejs and npm that during the set-up process I used npm install --save-dev jasmine-reporters#^2.0.0 and few days later I used npm install -g jasmine-reporters#latest
So there are 2 jasmine-reporters in my system, one in C:\Users\xxx\AppData\Roaming\npm\node_modules\jasmine-reporters
and another in C:\scripts\node_modules\jasmine-reporters,
with version 2.0.7 and 2.0.0 in package.json, respectively.
I just update my jasmine-reporters in C:\scripts\node_modules to 2.0.7 and the script finally works!
Thanks for your time, I really appreciate it.
As far as i see, there is no fault in your code. If your code is generating chrome and firefox xml's then everything with your configuration should be fine. Your code is working perfectly fine in my protractor. I am using Jasmine 2.3.1 with protractor 2.1.0. Try updating your protractor and jasmine framework to the latest version and then run your test suite. To update your jasmine run the below command -
npm update -g jasmine
Also if you have not added the framework tag after multiCapabilities tag in your conf.js file then you should be doing so as shown below -
framework: 'jasmine2',
Hope this solves your issue.
When using Chrome I am getting an error via the Mocha test runner, captured as part of afterEach with this.currentTest.err.
I am compiling coffeescript with browserify with the debug option using the awesome coffeeify plugin. This produces a single compiled file bundle.js with a sourceMappingURL=data:... that allows me to view and debug the original coffeescript directly.
Unfortunately when I access the err.stack in the afterEach Mocha hook, the stack contains references to bundle.js and not the corresponding .coffee files, which would be much more useful.
Here is some sample code with browserify.
First, installing it (for convenience) with npm:
$ npm install -g browserify; npm install coffeeify
x.coffee
try
throw Error("Thrown.")
catch err
console.log err.stack
Convert to x.js with:
$ browserify -t coffeeify x.coffee -d > x.js
x.html
<html>
<head>
<script src='x.js'></script>
</head>
<body></body>
</html>
If one opens this in Chrome the dev tools will show x.js, x.coffee (from the sourceMapURL) and x.html.
When we run this HTML page we get the following output to the console:
Error: Thrown.
at Error ()
at Object. (file://localhost/Users/bmh/tmp/x.js:5:9)
at i (file://localhost/Users/bmh/tmp/x.js:1:219)
at err (file://localhost/Users/bmh/x.js:1:382)
at file://localhost/Users/bmh/tmp/x.js:1:400
What we would expect is to have the trace refer to the .coffee file, looking something like this (which I am making up here for illustrative purposes):
Error: Thrown.
at Error ()
at Object. (file://localhost/Users/bmh/tmp/x.coffee:2:5)
Has anyone had any success converting the error stack to one that refers to the items at their source map locations?
I'm not sure about coffeeify, but the source-map-support module adds .stack support for code bundled with browserify. Just npm install source-map-support and put require('source-map-support').install() at the top of your code.