I am just starting to learn ReactJS with NodeJS and trying to run an application through NPM but just right on start I am getting the following error as :
You MUST specify an outfile with -o.
My Starting Command :
watchify src/main.jsx -v -t [ babelify --presets [ react ]] -o public/js/main.js
Whole Error :
C:\Users\Umair Shah Yousafzai\react-skeleton>npm start
> react-skeleton#1.0.0 start C:\Users\Umair Shah Yousafzai\react-skeleton
> watchify src/main.jsx -v -t [ babelify --presets [ react ]] -o public/js/main.js
You MUST specify an outfile with -o.
npm ERR! Windows_NT 10.0.10240
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v6.2.0
npm ERR! npm v3.8.9
npm ERR! code ELIFECYCLE
npm ERR! react-skeleton#1.0.0 start: watchify src/main.jsx -v -t [ babelify --presets [ react ]] -o public/js/main.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-skeleton#1.0.0 start script 'watchify src/main.jsx -v -t [ babelify --presets [ react ]] -o public/js/main.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-skeleton package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! watchify src/main.jsx -v -t [ babelify --presets [ react ]] -o public/js/main.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs react-skeleton
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls react-skeleton
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Umair Shah Yousafzai\react-skeleton\npm-debug.log
MY EFFORT TO SOLVE IT :
I have tried removing node_modules folder and then running back npm install but still I am getting the same error And my NPM Version is 3.8.9
My Files :
main.jsx :
var React = require('react');
var ReactDOM = require('react-dom');
var List = require('./components/List.jsx');
ReactDOM.render(<List />, document.getElementById('ingredients'));
List.jsx :
var React = require('react');
var Listitem = require('./Listitem.jsx');
var ingredients = [{"id":1,"text":"ham"},{"id":2,"text":"cheese"},{"id":3,"text":"potatos"}];
var List = React.createClass({
render: function() {
var listItems = ingredients.map(function(item) {
return <Listitem key={item.id} ingredient={item.text} />
});
return (<ul>{listItems}</ul>);
}
});
module.exports = List;
Listitem.jsx :
var React = require('react');
var Listitem = React.createClass({
render: function() {
return (
<li>
<h4>{this.props.ingredient}</h4>
</li>
);
}
});
module.exports = ListItem;
Try to put -o {src} as the very first option; the -t option's subargument syntax may mess here.
watchify src/main.jsx -o public/js/main.js -v -t [ babelify --presets [ react ]]
Also, you need to fix your jsx files.
main.jsx:
ReactDOM.render("<List />", document.getElementById('ingredients'));
List.jsx :
return "<Listitem key={item.id} ingredient={item.text} />"
return "<ul>{listItems}</ul>";
Listitem.jsx :
return "<li><h4>{this.props.ingredient}</h4></li>";
Related
I am trying to build my react library , and npm build gives this error . what is causing this error and how to fix it ?
src/lib/CircularProfiles.js -> dist/CircularProfiles.js
SyntaxError: src/lib/Github.js: Unexpected token (14:10)
12 | class GithubProfileBar extends Component {
13 |
> 14 | state = {
| ^
15 | totalRepos: 0,
16 | totalStars: 0,
17 | }
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-profiles#0.1.0 build: `rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-profiles#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/natesh/.npm/_logs/2018-12-26T03_51_21_931Z-debug.log
My .babelrc file :
{
"presets": [
"es2015",
"react"
]
}
I found that the error is because of older version of babel which doesn't handle newer versions of react code.
Here's the fix :
My problem was of older babel version fixed easily by installing:
npm i -D #babel/plugin-proposal-class-properties \
#babel/preset-react \
#babel/preset-env \
#babel/core \
#babel/plugin-transform-runtime \
In .babelrc file :
{
"presets": [
"#babel/react" ,
"#babel/env" ,
],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
}
Now babel built it successfully after this.
Make sure you are not using both v7 and v6 branch og babel. The "#babel/core" is the 7x branch and the "babel/core" is the 6x branch, you should not have both installed at once!
I am using windows and WebStorm. Tried to install angular2-localstorage with npm install angular2-localstorage but got an error.
The angular2-localstorage project is not maintained, so I'm posting here.
https://github.com/marcj/angular2-localStorage
Error details:
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "angular2-localstorage"
npm ERR! node v6.10.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! angular2-localstorage#0.4.0 postinstall: `typings install`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular2-localstorage#0.4.0 postinstall script 'typings install'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2-localstorage package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! typings install
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular2-localstorage
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular2-localstorage
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\***\WebstormProjects\ReusGooRoo2\npm-debug.log
The log file contents: http://pastebin.com/njG9XMgK
Any help appreciated.
Since the node module angular2-localstorage is not maintained properly, I would recommend angular-2-local-storage node_module as an alternative.
Steps:
Install npm install angular-2-local-storage
Make sure that the package is added in the config.js(systemjs or webpack)
Import the module and service as below
import { LocalStorageModule,LocalStorageService} from 'angular-2-local-storage';
Add the module to imports array and service to providers array as
imports: [ BrowserModule,
LocalStorageModule.withConfig({storageType: 'localStorage'}), ],
providers:[LocalStorageService],
Inject the Service as a dependency into component as below
constructor(private localStorageService: LocalStorageService) {
this.name = 'Angular-2-Local-Storage-Demo';
this.localStorageService.add('a',this.user);
console.log(this.localStorageService.get('a'));
this.valuFromLocalStorage= this.localStorageService.get('a')
}
LIVE DEMO
When I run "npm install", it runs successfully and it installs all the packages in node_module folder. However when I run "npm start" command in cmd then it gives following errors.
D:\INSM-HTML-Player>npm start
insm-player#1.0.0 start D:\INSM-HTML-Player
npm run build && npm run serve | npm run watch
insm-player#1.0.0 build D:\INSM-HTML-Player
rollup -c && concat-cli -f dist/main.js -o dist/all.js && npm run compress
resolve failed: { Error: Cannot find module 'npm-watch'
at Function.Module._resolveFilename (module.js:469:15)
at Function.requireRelative.resolve (D:\INSM-HTML-Player\node_modules\requir e-relative\index.js:30:17)
at resolve (D:\INSM-HTML-Player\node_modules\modify-babel-preset\lib\seriali ze.js:25:26)
at findAndRemove (D:\INSM-HTML-Player\node_modules\modify-babel-preset\lib\s erialize.js:67:11)
at D:\INSM-HTML-Player\node_modules\modify-babel-preset\lib\serialize.js:111:13 at Array.map (native)
at loadPreset (D:\INSM-HTML-Player\node_modules\modify-babel-preset\lib\serialize.js:103:29)
at module.exports (D:\INSM-HTML-Player\node_modules\modify-babel-preset\inde x.js:97:19)
at Object.<anonymous> (D:\INSM-HTML-Player\node_modules\babel-preset-es2015-rollup\index.js:3:18)
at Module._compile (module.js:570:32) code: 'MODULE_NOT_FOUND' } npm-watch resolve failed: { Error: Cannot find module 'grunt-cli'
at Function.Module._resolveFilename (module.js:469:15)
at Function.requireRelative.resolve (D:\INSM-HTML-Player\node_modules\requir e-relative\index.js:30:17)
at resolve (D:\INSM-HTML-Player\node_modules\modify-babel-preset\lib\seriali ze.js:25: at findAndRemove (D:\INSM-HTML-Player\node_modules\modify-babel-preset\lib\s erialize.js:67:11)
at D:\INSM-HTML-Player\node_modules\modify-babel-preset\lib\serialize.js:111:13
at Array.map (native)
at loadPreset (D:\INSM-HTML-Player\node_modules\modify-babel-preset\lib\serialize.js:103:29)
at module.exports (D:\INSM-HTML-Player\node_modules\modify-babel-preset\index.js:97:19)
at Object.<anonymous> (D:\INSM-HTML-Player\node_modules\babel-preset-es2015-rollup\index.js:3:18)
at Module._compile (module.js:570:32) code: 'MODULE_NOT_FOUND' } gruntcli C:\Program Files\nodejs\node.exe D:\INSM-HTML-Player\node_modules\rollup\bin\rollup concat-cli -f string -o string
Options: -f, --files files or glob/wildcard to be matched and concatenated
[array] [required]
-o, --output the resulting file of the concatenation[string] [default: "all"]
--helpShow help [boolean]Examples: concat-cli -f *.js -o bundle.js This will concatenate all the js files in the current directory into a bundle.js Missing required argument: f
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe""C:\\ProgramFiles\\nodejs\\node_modules\\npm\\bin\\npm cli.js" "run" "build"
npm ERR! node v6.9.4
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! insm-player#1.0.0 build: `rollup -c && concat-cli -f dist/main.js o dist/all.js && npm run compress`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the insm-player#1.0.0 build script 'rollup -c && concat cli - f dist/main.js -o dist/all.js && npm run compress'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the insm-player package,
npm ERR! not with npm itself. npm ERR! Tell
the author that this fails on your system:
npm ERR! rollup -c &&
concat-cli -f dist/main.js -o dist/all.js && npm run c ompress npm
ERR! You can get information on how to open an issue for this project
with:
npm ERR! npm bugs insm-player npm ERR! Or if that isn't
available, you can get their info via: npm ERR! npm owner ls
insm-player
npm ERR! There is likely additional logging output
above.
npm ERR! Please include the following file with any support request:
npm ERR! D:\INSM-HTML-Player\npm-debug.log
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\ node_modules\\npm\\bin\\npm-cli.js" "start" npm
ERR! node v6.9.4 npm ERR! npm v3.10.10 npm ERR! code ELIFECYCLE
npm ERR! insm-player#1.0.0 start: `npm run build && npm run serve |
npm run watch`
npm ERR! Exit status 1 npm ERR! npm ERR! Failed
at the insm-player#1.0.0 start script 'npm run build && npm run
serve | npm run watch'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the insm-player package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run build && npm run serve | npm run watch
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs insm-player
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls insm-player
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! D:\INSM-HTML-Player\npm-debug.log
You have to add the missing package npm-watch to package.json:
npm install npm-watch --save-dev
The run npm start again.
I am attempting to use Babelify to transpile the async and await ES7 features but I don't wish to use gulp, grunt or similar build tools. Thus far, I have had great success using only npm, and this one extra step doesn't seem to be worth the trouble of adopting a more sophisticated build toolchain.
This is my minimal package.json file which works as long as I don't use async/await:
{
"main": "main.js",
"scripts": {
"compile": "browserify . --outfile bundle.js"
},
"browserify": {
"transform": [
[
"babelify",
{
"optional": [
"es7.asyncFunctions"
]
}
]
]
},
"devDependencies": {
"babelify": "^6.2.0",
"browserify": "^11.0.1"
}
}
And this is the small amount of code I'm attempting to transpile (main.js):
import "babelify/polyfill";
let asPromised = await fetch();
console.log(asPromised);
function fetch() {
return Promise.resolve("fetched");
}
And here is the unfortunate result when I execute npm run compile:
> # compile ~/project
> browserify . --outfile bundle.js
SyntaxError: ~/project/main.js: Unexpected token (3:23)
1 | import "babelify/polyfill";
2 |
> 3 | let asPromised = await fetch();
| ^
4 | console.log(asPromised);
5 |
6 | function fetch() {
at Parser.pp.raise (~/project/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
at Parser.pp.unexpected (~/project/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:82:8)
at Parser.pp.semicolon (~/project/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:69:81)
at Parser.pp.parseVarStatement (~/project/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:371:8)
at Parser.pp.parseStatement (~/project/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:99:19)
at Parser.parseStatement (~/project/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:621:22)
at Parser.pp.parseTopLevel (~/project/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:30:21)
at Parser.parse (~/project/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/index.js:70:17)
at Object.parse (~/project/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/index.js:45:50)
at Object.exports.default (~/project/node_modules/babelify/node_modules/babel-core/lib/helpers/parse.js:36:18)
npm ERR! # compile: `browserify . --outfile bundle.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # compile script.
npm ERR! This is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! browserify . --outfile bundle.js
npm ERR! You can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! System Linux 4.0.2-stable
npm ERR! command "/usr/bin/node" "/usr/bin/npm" "run" "compile"
npm ERR! cwd ~/project
npm ERR! node -v v0.10.30
npm ERR! npm -v 1.4.21
npm ERR! code ELIFECYCLE
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! ~/project/npm-debug.log
npm ERR! not ok code 0
(gistified: https://gist.github.com/au-phiware/34376f64f9ea6777eefd)
I have also tried the following from the command line, which all give the same error:
browserify . --outfile bundle.js -t [ babelify --optional es7.asyncFunctions ]
babel --out-file bundle.js --optional es7.asyncFunctions main.js
babel --out-file bundle.js --stage 2 main.js
I feel as if I'm missing something here... or maybe this is a Babel bug?
TIA.
I feel as if I'm missing something here...
You can only use await inside async functions. For example:
async function foo() {
return await bar();
}
foo().then(x => console.log(x));
At the top level you always have to deal with the promise directly:
fetch().then(x => console.log(x));
This really puzzles me. Basically I set up a Go app that uses Grunt for the webapp.
I've use https://github.com/ddollar/heroku-buildpack-multi for my buildpack to combine nodejs and go buildpack and I couldn't get the nodejs buildpack to work.
I managed to install grunt and while executing my grunt task it just fails to get the module. Output from Heroku below:
Fetching repository, done.
Counting objects: 14, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (9/9), done.
Writing objects: 100% (10/10), 1.23 KiB | 0 bytes/s, done.
Total 10 (delta 6), reused 0 (delta 0)
-----> Fetching custom git buildpack... done
-----> Multipack app detected
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
=====> Detected Framework: Node.js
-----> Requested node range: 0.10.x
-----> Resolved node version: 0.10.30
-----> Downloading and installing node
-----> Exporting config vars to environment
-----> Installing dependencies
npm WARN optional dep failed, continuing fsevents#0.2.0
> blat#0.0.0 postinstall /tmp/build_7d4b99cb-602b-42ee-9a85-8b929a54646d
> echo postinstall time ls react; ls ./node_modules/react; echo AAA; ./node_modules/grunt-cli/bin/grunt heroku:deploy
postinstall time ls react
README.md
addons.js
dist
lib
node_modules
package.json
react.js
AAA
Loading "Gruntfile.js" tasks...ERROR
>> Error: Cannot find module 'React'
Warning: Task "heroku:deploy" not found. Use --force to continue.
Aborted due to warnings.
npm ERR! blat#0.0.0 postinstall: `echo postinstall time ls react; ls ./node_modules/react; echo AAA; ./node_modules/grunt-cli/bin/grunt heroku:deploy`
npm ERR! Exit status 3
npm ERR!
npm ERR! Failed at the blat#0.0.0 postinstall script.
npm ERR! This is most likely a problem with the blat package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! echo postinstall time ls react; ls ./node_modules/react; echo AAA; ./node_modules/grunt-cli/bin/grunt heroku:deploy
npm ERR! You can get their info via:
npm ERR! npm owner ls blat
npm ERR! There is likely additional logging output above.
npm ERR! System Linux 3.8.11-ec2
npm ERR! command "/tmp/build_7d4b99cb-602b-42ee-9a85-8b929a54646d/vendor/node/bin/node" "/tmp/build_7d4b99cb-602b-42ee-9a85-8b929a54646d/vendor/node/bin/npm" "install" "--userconfig" "/tmp/build_7d4b99cb-602b-42ee-9
a85-8b929a54646d/.npmrc" "--production"
npm ERR! cwd /tmp/build_7d4b99cb-602b-42ee-9a85-8b929a54646d
npm ERR! node -v v0.10.30
npm ERR! npm -v 1.4.21
npm ERR! code ELIFECYCLE
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /tmp/build_7d4b99cb-602b-42ee-9a85-8b929a54646d/npm-debug.log
npm ERR! not ok code 0
Note that I purposely call ls ./node_modules/react to see if it's installed and it is. But for some reason it can't find it on my node file.
My Gruntfile:
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-react')
grunt.loadNpmTasks('grunt-browserify')
// doing this for testing - fails on heroku
var react= require('React')
grunt.initConfig({
browserify: {
options: {
transform: [require('grunt-react').browserify]
},
app: {
src: 'src/app.react.js',
dest: 'public/index.js'
}
},
})
grunt.registerTask('heroku:deploy', [
'browserify:app'
])
}
And package.json file:
{
"name": "blat",
"version": "0.0.0",
"description": "",
"engines": {
"node": "0.10.x",
"npm": "1.4.x"
},
"dependencies": {
"director": "^1.2.3",
"es6-promise": "^1.0.0",
"grunt": "^0.4.5",
"grunt-cli": "^0.1.13",
"grunt-react": "^0.9.0",
"react": "^0.11.1",
"react-router": "^0.5.2",
"superagent": "^0.18.2",
"superagent-prefix": "0.0.2"
},
"devDependencies": {},
"scripts": {
"postinstall": "echo postinstall time; ./node_modules/grunt-cli/bin/grunt heroku:deploy"
}
}
.buildpacks
https://github.com/heroku/heroku-buildpack-nodejs.git
https://github.com/kr/heroku-buildpack-go.git
Heroku config:
BUILDPACK_URL = https://github.com/ddollar/heroku-buildpack-multi.git
NODE_ENV = production
Does anyone know what the problem is? I can't reproduce it locally and it's so frustrating. I've tried https://github.com/mbuchetics/heroku-buildpack-nodejs-grunt buildpack but it gives me the same result..
Ok turns out it was case sensitive issue. Apparently I was using HFS+ case insensitive format which explains why my code was working locally..