Develop Reference

Cannot build vue project

I'm trying to build my vue project and push it into github pages.
I'm trying to run npm run build but all I'm getting is this :
> my-domain#1.0.0 build /Users/macbookair/Workspace/fun/mine/web
> cross-env NODE_ENV=production webpack --progress --hide-modules
Hash: 2399923ef57865258a1f
Version: webpack 3.11.0
Time: 9252ms
Asset Size Chunks Chunk Names
build.js 740 kB 0 [emitted] [big] main
build.js.map 919 kB 0 [emitted] main
ERROR in build.js from UglifyJs
Unexpected token: punc (() [build.js:503,6]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! andre.js.org#1.0.0 build: `cross-env NODE_ENV=production webpack --progress --hide-modules`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the andre.js.org#1.0.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! /Users/macbookair/.npm/_logs/2018-02-27T09_19_23_677Z-debug.log
I also tried to run npm run build; push-dir --dir=dist --branch=gh-pages --cleanup and all I'm getting is this :
> andre.js.org#1.0.0 build /Users/macbookair/Workspace/fun/mine/web
> cross-env NODE_ENV=production webpack --progress --hide-modules
Hash: 2399923ef57865258a1f
Version: webpack 3.11.0
Time: 9524ms
Asset Size Chunks Chunk Names
build.js 740 kB 0 [emitted] [big] main
build.js.map 919 kB 0 [emitted] main
ERROR in build.js from UglifyJs
Unexpected token: punc (() [build.js:503,6]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! andre.js.org#1.0.0 build: `cross-env NODE_ENV=production webpack --progress --hide-modules`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the andre.js.org#1.0.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! /Users/macbookair/.npm/_logs/2018-02-27T09_22_29_715Z-debug.log
I don't really know how to build it since I'm new to Vue, I'm using the webpack-simple vue template

You can try this option:
https://github.com/creotip/vue-particles/issues/7
But maybe the better options will be reinstall npm

You use Version: webpack 3.11.0
Try to install latest version
$ npm i -D webpack#latest
$ npm run build

Installing Babel V6.x ES7 Async/Await on Node.js v6.2.0 with Nodemon

Man is this a pain to setup! I've followed the installation instructions here clicking on the nodemon box:
https://babeljs.io/docs/setup/#installation
npm install babel-cli babel-preset-es2015 --save-dev
.babelrc in root directory:
{
"presets": ["es2015"],
"plugins": ["transform-async-to-generator"]
}
package.json (I've installed more babel stuff as seen):
...
"devDependencies": {
"babel-cli": "^6.11.4",
"babel-core": "^6.13.2",
"babel-plugin-transform-async-to-generator": "^6.8.0",
"babel-polyfill": "^6.13.0",
"babel-preset-es2015": "^6.13.2",
"babel-preset-node6": "^11.0.0",
"babel-register": "^6.11.6"
},
"scripts": {
"startn": "nodemon app.js",
"babel-node": "babel-node --presets=es2015 --ignore='foo|bar|baz'",
"babel-dev": "nodemon --exec npm run babel-node -- experiment/socketio/test.js"
},
...
test.js:
(async function () { // <-- error occues here
const value = await 123;
console.log(value);
})().then(() => {
console.log('Done');
});
I run the command run-script babel-dev as seen below. Error:
karl#karl-ux303ln:~/dev/sketch$ npm run-script babel-dev
> sketch#0.0.1 babel-dev /home/karl/dev/sketch
> nodemon --exec npm run babel-node -- experiment/socketio/test.js
[nodemon] 1.10.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `npm run babel-node experiment/socketio/test.js`
> sketch#0.0.1 babel-node /home/karl/dev/sketch
> babel-node --presets=es2015 --ignore='foo|bar|baz' "experiment/socketio/test.js"
/home/karl/dev/sketch/node_modules/babel-core/lib/transformation/file/index.js:591
throw err;
^
SyntaxError: /home/karl/dev/sketch/experiment/socketio/test.js: Unexpected token (1:7)
> 1 | (async function () {
| ^
2 | const value = await 123;
3 | console.log(value);
4 | })().then(() => {
at Parser.pp.raise (/home/karl/dev/sketch/node_modules/babylon/lib/parser/location.js:22:13)
at Parser.pp.unexpected (/home/karl/dev/sketch/node_modules/babylon/lib/parser/util.js:89:8)
at Parser.pp.expect (/home/karl/dev/sketch/node_modules/babylon/lib/parser/util.js:83:33)
at Parser.pp.parseParenAndDistinguishExpression (/home/karl/dev/sketch/node_modules/babylon/lib/parser/expression.js:582:12)
at Parser.pp.parseExprAtom (/home/karl/dev/sketch/node_modules/babylon/lib/parser/expression.js:481:19)
at Parser.pp.parseExprSubscripts (/home/karl/dev/sketch/node_modules/babylon/lib/parser/expression.js:277:19)
at Parser.pp.parseMaybeUnary (/home/karl/dev/sketch/node_modules/babylon/lib/parser/expression.js:257:19)
at Parser.pp.parseExprOps (/home/karl/dev/sketch/node_modules/babylon/lib/parser/expression.js:188:19)
at Parser.pp.parseMaybeConditional (/home/karl/dev/sketch/node_modules/babylon/lib/parser/expression.js:165:19)
at Parser.pp.parseMaybeAssign (/home/karl/dev/sketch/node_modules/babylon/lib/parser/expression.js:128:19)
npm ERR! Linux 3.19.0-65-generic
npm ERR! argv "/home/karl/.nvm/versions/node/v6.2.0/bin/node" "/home/karl/.nvm/versions/node/v6.2.0/bin/npm" "run" "babel-node" "experiment/socketio/test.js"
npm ERR! node v6.2.0
npm ERR! npm v3.8.9
npm ERR! code ELIFECYCLE
npm ERR! sketch#0.0.1 babel-node: `babel-node --presets=es2015 --ignore='foo|bar|baz' "experiment/socketio/test.js"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sketch#0.0.1 babel-node script 'babel-node --presets=es2015 --ignore='foo|bar|baz' "experiment/socketio/test.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 sketch package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! babel-node --presets=es2015 --ignore='foo|bar|baz' "experiment/socketio/test.js"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs sketch
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls sketch
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/karl/dev/sketch/npm-debug.log
[nodemon] app crashed - waiting for file changes before starting...
I've also tried switching to node v4.4.7 and upgrading npm to 3.10.6. still same error.

1) remove all babel modules (remove everything, this is a little buggy I've found out)
2) install the following:
npm install --save-dev babel-polyfill babel-preset-es2015 babel-preset-stage-3 babel-register
3) fix .babelrc file:
{
"presets": [
"es2015",
"stage-3"
]
}
4) check to see if it works (-r flag is to preload modules):
node -r babel-register -r babel-polyfill experiment/socketio/test.js
To fix nodemon:
nodemon -r babel-register -r babel-polyfill experiment/socketio/test.js

Async/await is handled in babeljs by the plugin transform-async-to-generator, which is included in the stage-3 preset. It's not included by default in the es2015 preset, so you'll have to add either the plugin itself or the stage-3 preset explicitly. To do that on the command line, change this line in package.json:
"babel-node": "babel-node --presets=es2015 --ignore='foo|bar|baz'",
to read:
"babel-node": "babel-node --presets=es2015,stage-3 --ignore='foo|bar|baz'",
adding the stage-3 preset. The same could also be achieved like so:
"babel-node": "babel-node --presets=es2015 --plugins=transform-async-to-generator --ignore='foo|bar|baz'",
However, it's generally recommended practice to use the .babelrc configuration file, which could be as simple as:
{
"presets": ["es2015", "stage-3"]
}
or
{
"presets": ["es2015"],
"plugins": ["transform-async-to-generator"]
}
and then the line in your package.json could just be:
"babel-node": "babel-node --ignore='foo|bar|baz'",
(original answer for comment context)
You need to add:
"plugins": ["transform-async-to-generator"]
to your .babelrc, as I don't believe async/await is included in any of the standard presets (since it can be implemented in multiple ways)

Can anyone let me know why am I getting this error?

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>";

Transpile async functions using babelify with no more than npm

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));

Cannot find module on grunt when deploying to Heroku

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..