I'm getting the following error when trying to run npm install on my project: ERROR in bundle.js from UglifyJs
Unexpected token keyword «function», expected punc «,»
I'm aware it's because I'm trying to use an ES6 feature, but I think something is wrong with my setup which is why it isn't getting compiled to ES5 by Babel.
I've looked at a number of problems on SO regarding the issue, and I've incorporated some of those answers, but none has solved the problem.
Here is my package.json:
{
"name": "my-project",
"version": "0.0.1",
"engines": {
"node": "8.9.1"
},
"private": true,
"scripts": {
"dev": "webpack --progress --colors --watch",
"postinstall": "NODE_ENV=prod webpack -p"
},
"dependencies": {
"babel-core": "^6.7.4",
"babel-loader": "^7.1.2",
"babel-plugin-transform-react-jsx": "^6.1.18",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"body-parser": "^1.18.2",
"express": "^4.16.2",
"material-ui": "^0.20.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-player": "^1.1.2",
"react-render": "^1.2.1",
"webpack": "^3.11.0",
"yargs": "^11.0.0"
},
"babel": {
"plugins": [
"transform-react-jsx"
],
"presets": [
"es2015",
"react"
]
},
"devDependencies": {
"uglifyjs-webpack-plugin": "^1.2.0"
}
}
and my webpack.config.babel.js
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
context: __dirname + "/static",
entry: {
client: ['./App.js']
},
output: {
filename: 'bundle.js',
path: __dirname + "/static/build"
},
resolve: {
extensions: ['*', '.js']
},
plugins: [
new UglifyJSPlugin({
include: /\.min\.js$/
})
],
module: {
loaders: [
{
test: /(\.js$)/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: [
'react',
['es2015', {'modules': false}]
]
}
}
]
}
};
Related
New to webpack trying to understand how to make file structure, webpack.config.js and package.json work together, but not sure what is failing as the client.min.js(my outputted bunfdle file) is never regenerated upon NPM run dev
webpack.config.js:
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/client.js",
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
}
}
]
},
output: {
path: __dirname+"/src/",
filename: "client.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
package.json:
{
"name": "appThing",
"version": "0.0.0",
"main": "webpack.config.js",
"dependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.0",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.3.13",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"flux": "^2.1.1",
"history": "^1.17.0",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"react-router": "^1.0.3",
"webpack": "^2",
"webpack-dev-server": "^2"
},
"scripts": {
"dev": "webpack-dev-server --content-base src --inline --hot"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^2.7.0",
"webpack-cli": "^2.0.10"
},
"description": ""
}
File structure:
NPM run dev result:
webpack-dev-server does not generate files. It serves all assets from memory.
If you want to generate files, run webpack.
I am aware that this is quite a common problem with Webpack, but I am a total newbie and the solutions I've found so far seem to be very specific to the single project. However, the scenario is the same: Webpack compiling the project correctly and then showing a blank page, without reporting any errors.
Here is my webpack.config.js (I made it following tutorials):
import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
export default () => ({
entry: [
path.join(__dirname, 'src/index.jsx'),
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './App.html'
}),
],
module: {
rules: [
{
test: /.jsx?$/,
exclude: /node_modules/,
include: path.join(__dirname, 'src'),
use: [
{
loader: 'babel',
options: {
babelrc: false,
presets: [
['es2015', { modules: false }],
'react',
],
}
}
]
},
{
test: /\.(css|scss|sass)$/,
loader: 'style!css!sass',
},
]
},
});
module.exports = config;
Here my package.json:
{
"name": "smart-fit",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"dependencies": {
"chartjs": "^0.3.24",
"interactjs": "^1.2.8",
"jquery": "^3.2.1",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-hot-loader": "^3.0.0-beta.3",
"react-table": "^5.6.0"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.24.1",
"css-loader": "^0.28.1",
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"html-webpack-plugin": "^2.28.0",
"loader-utils": "^1.1.0",
"node-sass": "^4.5.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.17.0",
"webpack": "^2.1.0-beta.25",
"webpack-dev-server": "^2.1.0-beta.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Webpack version is the lastest and the project is written using React and ES5.
I have the following webpack.config.js :
"use strict";
const debug = process.env.NODE_ENV !== "production";
const webpack = require('webpack');
const path = require('path');
module.exports = {
devtool: debug ? 'inline-sourcemap' : null,
devServer: {
inline: true,
port: 3333,
hot: true,
contentBase: "src/static/",
historyApiFallback: {
index: '/index-static.html'
}
},
entry: [
'webpack-dev-server/client?http://localhost:3000/',
'webpack/hot/only-dev-server',
'./src/app-client.js'
],
output: {
path: path.join(__dirname, 'src', 'static', 'js'),
publicPath: "/js/",
filename: 'bundle.js'
},
module: {
loaders: [{
test: path.join(__dirname, 'src'),
loader: ['babel-loader'],
query: {
cacheDirectory: 'babel_cache',
presets: debug ? ['react', 'es2015', 'react-hmre'] : ['react', 'es2015']
}
},
{ test: /\.jsx?$/, loaders: ['react-hot', 'jsx?harmony'], include: path.join(__dirname, 'src') }
]
},
plugins: debug ? [] : [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false },
mangle: true,
sourcemap: false,
beautify: false,
dead_code: true
}),
]
};
package.json
{
"name": "judo-heroes",
"version": "1.0.0",
"description": "Simple application to showcase how to achieve universal rendering and routing with React and Express.",
"main": "src/server.js",
"repository": "git#github.com:lmammino/judo-heroes.git",
"scripts": {
"start": "NODE_ENV=development node_modules/.bin/babel-node --presets 'react,es2015' src/server.js",
"start-dev": "npm run start-dev-hmr",
"start-dev-single-page": "node_modules/.bin/http-server src/static",
"start-dev-hmr": "node_modules/.bin/webpack-dev-server --progress --inline --hot",
"build": "NODE_ENV=development node_modules/.bin/webpack -d"
},
"author": "Luciano Mammino",
"license": "MIT",
"dependencies": {
"babel-cli": "^6.11.4",
"babel-core": "^6.13.2",
"babel-loader": "^6.2.5",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.11.1",
"babel-preset-react-hmre": "^1.1.1",
"ejs": "^2.5.1",
"express": "^4.14.0",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"react-router": "^2.6.1"
},
"devDependencies": {
"http-server": "^0.9.0",
"react-hot-loader": "^1.3.0",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.14.1"
}
}
I am trying to get the browser to refresh every time I make changes to some of the components, but the changes don't take place.
Your issue is probably that you don't get to the loader with test test: /\.jsx?$/, since the first loader matches.
Can you try to use react-hot in the first module?
{
test: path.join(__dirname, 'src'),
loader: ['react-hot','babel-loader'],
query: {
cacheDirectory: 'babel_cache',
presets: debug ? ['react', 'es2015', 'react-hmre'] : ['react', 'es2015']
}
},
A more precise test for this loader would be better in the long run though.
I simply had to run this command:
"start-dev-hmr": "node_modules/.bin/webpack-dev-server --progress --inline --hot",
from
{
"name": "judo-heroes",
"version": "1.0.0",
"description": "Simple application to showcase how to achieve universal rendering and routing with React and Express.",
"main": "src/server.js",
"repository": "git#github.com:lmammino/judo-heroes.git",
"scripts": {
"start": "NODE_ENV=production node_modules/.bin/babel-node --presets 'react,es2015' src/server.js",
"start-dev": "npm run start-dev-hmr",
"start-dev-single-page": "node_modules/.bin/http-server src/static",
"start-dev-hmr": "node_modules/.bin/webpack-dev-server --progress --inline --hot",
"build": "NODE_ENV=production node_modules/.bin/webpack -p"
},
"author": "Luciano Mammino",
"license": "MIT",
"dependencies": {
"babel-cli": "^6.11.4",
"babel-core": "^6.13.2",
"babel-loader": "^6.2.5",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.11.1",
"babel-preset-react-hmre": "^1.1.1",
"ejs": "^2.5.1",
"express": "^4.14.0",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"react-router": "^2.6.1"
},
"devDependencies": {
"http-server": "^0.9.0",
"react-hot-loader": "^1.3.0",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.14.1"
}
}
Getting above error with below configuration, how should I make it working?
.babelrc:
{
"passPerPreset": true,
"presets": [
{"plugins": ["./build/babelRelayPlugin"]},
"react",
"es2015",
"stage-0"
]
}
package.json:
{
"name": "1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-polyfill": "^6.13.0",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"babel-relay-plugin": "^0.9.2",
"express": "^4.14.0",
"express-graphql": "^0.5.3",
"graphql": "^0.6.2",
"graphql-relay": "^0.4.2",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"react-relay": "^0.9.2",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.15.0"
},
"devDependencies": {
"babel-cli": "^6.14.0"
}
}
server.js:
//
//
//
const compiler = webpack({
entry: path.resolve(__dirname, 'js', 'app.js'),
module: {
loaders: [
{
test: /\.js$/,
include: [ path.resolve(__dirname, "js") ],
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
},
}
],
},
output: {filename: '/app.js', path: '/', publicPath: '/js/'}
});
const appServer = new WebpackDevServer(compiler, {
contentBase: '/public/',
proxy: {'/graphql': 'http://localhost:8000'},
publicPath: '/js/',
stats: {colors: true}
});
//
//
//
Terminal Error: babel-node server.js
ERROR in ./js/app.js
Module build failed: Error: Plugin 0 specified in 'foreign' provided an invalid property of '_c'
Browser Error: localhost: 3000
in the console window:
Uncaught Invariant Violation: RelayQL: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used verbatim as Relay.QL.
I have had success using the following setup. I am using the plugin with the babel loader in my webpack module rather than in .babelrc
In webpack:
query: {
presets: [
"es2015", "react", "stage-0", {
"plugins": [
"./schema-build/babelRelayPlugin"
]
}
]
}
In .babelrc:
{
"passPerPreset": true,
"presets": [
"react",
"es2015",
"stage-0"
]
}
Why am I getting this syntax error??? Driving me nuts, I know its some simple...I basically copied the example code from here:
http://react-toolbox.com/#/components/input
And I am simply trying to import it into here:
Any suggestions are hugely appreciated...
webpack.config.js:
const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
context: __dirname,
devtool: 'inline-source-map',
entry: [
'webpack-hot-middleware/client',
'./app/index.jsx'
],
output: {
path: path.join(__dirname, 'build'),
filename: 'react-toolbox.js',
publicPath: '/'
},
resolve: {
extensions: ['', '.jsx', '.scss', '.js', '.json'],
modulesDirectories: [
'node_modules',
path.resolve(__dirname, './node_modules')
]
},
module: {
loaders: [
{
test: /(\.js|\.jsx)$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets:['es2015','react']
}
}, {
test: /(\.scss|\.css)$/,
loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap!toolbox')
}
]
},
toolbox: {
theme: path.join(__dirname, 'app/toolbox-theme.scss')
},
postcss: [autoprefixer],
plugins: [
new ExtractTextPlugin('react-toolbox.css', { allChunks: true }),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
]
};
package.json:
{
"name": "react-toolbox-example",
"version": "0.11.4",
"description": "A set of complementary tools to ReactJS.",
"author": "React Toolbox Team (http://github.com/react-toolbox)",
"contributors": [
{
"name": "Javi Jimenez Villar",
"url": "http://soyjavi.com/",
"email": "javi.jimenez.villar#gmail.com"
},
{
"name": "Javi Velasco Arjona",
"url": "http://javivelasco.com/",
"email": "javier.velasco86#gmail.com"
}
],
"bugs": {
"url": "https://github.com/react-toolbox/react-toolbox/issues",
"email": "issues#react-toolbox.com"
},
"keywords": [
"react",
"react-component",
"material design",
"toolbox",
"components"
],
"license": "MIT",
"devDependencies": {
"autoprefixer": "6.3.6",
"babel-core": "6.7.7",
"babel-eslint": "6.0.3",
"babel-loader": "^6.0.1",
"babel-plugin-react-transform": "2.0.2",
"babel-preset-es2015": "^6.1.4",
"babel-preset-react": "^6.1.4",
"classnames": "^2.2.1",
"cross-env": "^1.0.1",
"css-loader": "0.23.1",
"express": "^4.13.3",
"extract-text-webpack-plugin": "1.0.1",
"node-sass": "3.4.2",
"normalize.css": "^4.0.0",
"postcss-loader": "0.8.2",
"react": "^15.0.0",
"react-addons-css-transition-group": "^15.0.0",
"react-dom": "^15.0.0",
"react-toolbox": "^0.16.2",
"react-transform-catch-errors": "^1.0.0",
"react-transform-hmr": "^1.0.1",
"redbox-react": "1.2.3",
"sass-loader": "3.2.0",
"style-loader": "0.13.1",
"toolbox-loader": "0.0.3",
"webpack": "1.13.0",
"webpack-dev-middleware": "1.6.1",
"webpack-hot-middleware": "2.10.0"
},
"scripts": {
"start": "node ./server",
"build": "cross-env NODE_ENV=production UV_THREADPOOL_SIZE=100 webpack --config ./webpack.config",
"deploy": "gh-pages -d build"
},
"repository": "github:react-toolbox/react-toolbox-example"
}
.babelrc
{
"presets": ["es2015", "stage-0", "react"]
}
https://github.com/malexanders/react-toolbox-example
Your code is crashing on the class property syntax which is currently a stage 1 Ecmascript proposal. In order for babel to transpile this correctly you need the stage-1 preset. I would say it's pretty common to have the stage-0 preset which includes everything above it as well.
You can even see from your repo's .babelrc file already wanting to include stage-0 preset:
{
"plugins": ["es2015", "stage-0"]
}
However it looks like you're overriding this file in your webpack config using the query key here:
query: {
presets:['es2015', 'react']
}
So what you need to do to fix this is
1) Install stage-0 preset
npm install --save-dev babel-preset-stage-0
2) Add the preset to your webpack.config.js query: presets array
query: {
presets: ['es2015', 'react', 'stage-0']
}
The equals should be a colon. Additionally, there needs to be a comma after the last curly brace.