When running the command: npm run build I get this error:
clean-webpack-plugin: ..../internals/webpack/build has been removed.
Hash: e392cba8ffe45d4ccf3e
Version: webpack 3.5.5
Time: 25347ms
Asset Size Chunks Chunk Names
.htaccess.bin 1.79 kB [emitted]
manifest.json 570 bytes [emitted]
0.4c78ff730ee413b0f722.chunk.js 41 kB 0 [emitted]
1.e85494ada20960940da1.chunk.js 2.42 kB 1 [emitted]
2.fbee78dcf2d2eb0c7313.chunk.js 3.47 kB 2 [emitted]
3.20d0e2989b358867fdd4.chunk.js 24.1 kB 3 [emitted]
main.0a7a3dfce71c313b3759.js 4.98 MB 4 [emitted] main
main.7e2d77a8bd40ea6ad93420543f986fde.css 77.8 kB 4 [emitted] main
index.html 1.67 kB [emitted]
sw.js 17.8 kB [emitted]
ERROR in main.0a7a3dfce71c313b3759.js from UglifyJs
Invalid assignment [main.0a7a3dfce71c313b3759.js:114163,30]
Child html-webpack-plugin for "index.html":
1 asset
Child html-webpack-plugin for "index.html":
1 asset
Child html-webpack-plugin for "index.html":
1 asset
Child __offline_serviceworker:
1 asset
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! react-boilerplate@3.5.0 build: `cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the react-boilerplate@3.5.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Here is my package.json
{
"name": "react-boilerplate",
"version": "3.5.0",
"description": "A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices",
"repository": {
"type": "git",
"url": "git://github.com/react-boilerplate/react-boilerplate.git"
},
"engines": {
"npm": ">=3",
"node": ">=5"
},
"author": "Max Stoiber",
"license": "MIT",
"scripts": {
"analyze:clean": "rimraf stats.json",
"preanalyze": "npm run analyze:clean",
"analyze": "node ./internals/scripts/analyze.js",
"extract-intl": "babel-node --presets env,stage-0 -- ./internals/scripts/extract-intl.js",
"npmcheckversion": "node ./internals/scripts/npmcheckversion.js",
"preinstall": "npm run npmcheckversion",
"postinstall": "npm run build:dll",
"prebuild": "npm run build:clean",
"build": "cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout",
"build:clean": "rimraf ./build",
"build:dll": "node ./internals/scripts/dependencies.js",
"start": "cross-env NODE_ENV=development node server",
"start:tunnel": "cross-env NODE_ENV=development ENABLE_TUNNEL=true node server",
"start:production": "npm run test && npm run build && npm run start:prod",
"start:prod": "cross-env NODE_ENV=production node server",
"presetup": "npm i chalk shelljs",
"setup": "node ./internals/scripts/setup.js",
"postsetup": "npm run build:dll",
"clean": "shjs ./internals/scripts/clean.js",
"clean:all": "npm run analyze:clean && npm run test:clean && npm run build:clean",
"generate": "plop --plopfile internals/generators/index.js",
"lint": "npm run lint:js",
"lint:eslint": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts",
"lint:js": "npm run lint:eslint -- . ",
"lint:staged": "lint-staged",
"pretest": "npm run test:clean && npm run lint",
"test:clean": "rimraf ./coverage",
"test": "cross-env NODE_ENV=test jest --coverage",
"test:watch": "cross-env NODE_ENV=test jest --watchAll",
"coveralls": "cat ./coverage/lcov.info | coveralls"
},
"lint-staged": {
"*.js": "lint:eslint"
},
"pre-commit": "lint:staged",
"babel": {
"plugins": [
"styled-components"
],
"presets": [
[
"env",
{
"modules": false
}
],
"react",
"stage-0"
],
"env": {
"production": {
"only": [
"app"
],
"plugins": [
"transform-react-remove-prop-types",
"transform-react-constant-elements",
"transform-react-inline-elements"
]
},
"test": {
"plugins": [
"transform-es2015-modules-commonjs",
"dynamic-import-node"
]
}
}
},
"eslintConfig": {
"parser": "babel-eslint",
"extends": "airbnb",
"env": {
"browser": true,
"node": true,
"jest": true,
"es6": true
},
"plugins": [
"redux-saga",
"react",
"jsx-a11y"
],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"arrow-parens": [
"error",
"always"
],
"arrow-body-style": [
2,
"as-needed"
],
"class-methods-use-this": 0,
"comma-dangle": [
2,
"always-multiline"
],
"import/imports-first": 0,
"import/newline-after-import": 0,
"import/no-dynamic-require": 0,
"import/no-extraneous-dependencies": 0,
"import/no-named-as-default": 0,
"import/no-unresolved": 2,
"import/no-webpack-loader-syntax": 0,
"import/prefer-default-export": 0,
"indent": [
2,
2,
{
"SwitchCase": 1
}
],
"jsx-a11y/aria-props": 2,
"jsx-a11y/heading-has-content": 0,
"jsx-a11y/href-no-hash": 2,
"jsx-a11y/label-has-for": 2,
"jsx-a11y/mouse-events-have-key-events": 2,
"jsx-a11y/role-has-required-aria-props": 2,
"jsx-a11y/role-supports-aria-props": 2,
"max-len": 0,
"newline-per-chained-call": 0,
"no-confusing-arrow": 0,
"no-console": 1,
"no-use-before-define": 0,
"prefer-template": 2,
"react/forbid-prop-types": 0,
"react/jsx-first-prop-new-line": [
2,
"multiline"
],
"react/jsx-filename-extension": 0,
"react/jsx-no-target-blank": 0,
"react/require-default-props": 0,
"react/require-extension": 0,
"react/self-closing-comp": 0,
"redux-saga/no-yield-in-race": 2,
"redux-saga/yield-effects": 2,
"require-yield": 0
},
"settings": {
"import/resolver": {
"webpack": {
"config": "./internals/webpack/webpack.prod.babel.js"
}
}
}
},
"dllPlugin": {
"path": "node_modules/react-boilerplate-dlls",
"exclude": [
"chalk",
"compression",
"cross-env",
"express",
"ip",
"minimist",
"sanitize.css"
],
"include": [
"core-js",
"lodash",
"eventsource-polyfill"
]
},
"jest": {
"collectCoverageFrom": [
"app/**/*.{js,jsx}",
"!app/**/*.test.{js,jsx}",
"!app/*/RbGenerated*/*.{js,jsx}",
"!app/app.js",
"!app/global-styles.js",
"!app/*/*/Loadable.{js,jsx}"
],
"coverageThreshold": {
"global": {
"statements": 98,
"branches": 91,
"functions": 98,
"lines": 98
}
},
"moduleDirectories": [
"node_modules",
"app"
],
"moduleNameMapper": {
".*\\.(css|less|styl|scss|sass)$": "<rootDir>/internals/mocks/cssModule.js",
".*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/internals/mocks/image.js"
},
"setupTestFrameworkScriptFile": "<rootDir>/internals/testing/test-bundler.js",
"testRegex": "tests/.*\\.test\\.js$"
},
"dependencies": {
"@fortawesome/fontawesome": "^1.1.8",
"@fortawesome/react-fontawesome": "0.0.18",
"@material-ui/core": "^1.4.2",
"@material-ui/icons": "^1.1.0",
"babel-polyfill": "6.23.0",
"babel-preset-es2015": "^6.24.1",
"chalk": "1.1.3",
"child_process": "1.0.2",
"cls-bluebird": "^2.1.0",
"compression": "^1.7.3",
"cross-env": "5.0.0",
"email-validator": "^2.0.4",
"express": "^4.16.3",
"fontfaceobserver": "2.0.9",
"fs": "0.0.1-security",
"history": "^4.7.2",
"hoist-non-react-statics": "2.1.1",
"immutable": "3.8.1",
"intl": "1.2.5",
"invariant": "2.2.2",
"ip": "1.1.5",
"js-file-download": "^0.4.4",
"lodash": "^4.17.10",
"marquee-react-dwyer": "^5.7.9",
"material-ui": "^1.0.0-beta.46",
"minimist": "1.2.0",
"net": "^1.0.2",
"prop-types": "15.5.10",
"query-string": "^6.2.0",
"re-carousel": "^2.0.9",
"react": "^16.4.2",
"react-addons-css-transition-group": "^15.6.2",
"react-countdown-now": "^1.3.0",
"react-device-detect": "^1.5.9",
"react-dom": "^16.4.2",
"react-helmet": "5.1.3",
"react-html-parser": "^2.0.2",
"react-intl": "2.3.0",
"react-loadable": "4.0.3",
"react-marquee": "^0.1.1",
"react-paypal-express-checkout": "^1.0.4",
"react-redux": "5.0.5",
"react-router-dom": "4.1.1",
"react-router-redux": "5.0.0-alpha.6",
"react-smooth-marquee": "^1.0.0",
"react-sticky-el": "^1.0.20",
"react-swipeable-views": "^0.12.16",
"react-text-marquee": "^1.0.1",
"react-text-mask": "^5.4.3",
"react-tooltip": "^3.6.1",
"redux": "3.6.0",
"redux-immutable": "4.0.0",
"redux-localstorage": "^0.4.1",
"redux-persist": "^5.10.0",
"redux-saga": "^0.15.6",
"redux-thunk": "^2.3.0",
"reselect": "3.0.1",
"sanitize.css": "4.1.0",
"scroll-events": "^1.1.3",
"styled-components": "2.0.0",
"tls": "0.0.1",
"url": "^0.11.0",
"warning": "3.0.0",
"whatwg-fetch": "2.0.3"
},
"devDependencies": {
"add-asset-html-webpack-plugin": "2.0.1",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "7.2.3",
"babel-loader": "7.1.0",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-react-intl": "2.3.1",
"babel-plugin-react-transform": "2.0.2",
"babel-plugin-styled-components": "1.1.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
"babel-plugin-transform-es2015-classes": "^6.24.1",
"babel-plugin-transform-es2015-function-name": "^6.24.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-react-constant-elements": "6.23.0",
"babel-plugin-transform-react-inline-elements": "6.22.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "6.24.1",
"babel-preset-stage-2": "^6.24.1",
"babel-preset-stage-3": "^6.24.1",
"babel-runtime": "^6.26.0",
"circular-dependency-plugin": "3.0.0",
"clean-webpack-plugin": "0.1.17",
"coveralls": "^3.0.2",
"css-loader": "0.28.4",
"enzyme": "2.8.2",
"eslint": "3.19.0",
"eslint-config-airbnb": "15.0.1",
"eslint-config-airbnb-base": "11.2.0",
"eslint-import-resolver-webpack": "0.8.3",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-jsx-a11y": "5.0.3",
"eslint-plugin-react": "7.0.1",
"eslint-plugin-redux-saga": "0.3.0",
"eventsource-polyfill": "0.9.6",
"exports-loader": "0.6.4",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "0.11.1",
"html-loader": "0.4.5",
"html-webpack-plugin": "2.29.0",
"image-webpack-loader": "^4.5.0",
"imports-loader": "0.7.1",
"jest-cli": "^23.6.0",
"lint-staged": "3.5.1",
"ngrok": "2.2.9",
"node-plop": "0.7.0",
"null-loader": "0.1.1",
"offline-plugin": "^5.0.5",
"plop": "1.8.0",
"pre-commit": "1.2.2",
"react-test-renderer": "15.6.1",
"rimraf": "2.6.1",
"shelljs": "0.7.7",
"style-loader": "0.18.1",
"uglifyjs-webpack-plugin": "^2.0.1",
"url-loader": "^1.0.1",
"webpack": "3.5.5",
"webpack-dev-middleware": "1.11.0",
"webpack-hot-middleware": "2.18.0"
}
}Here is the webpack.base.babel.js
/**
* COMMON WEBPACK CONFIGURATION
*/
const path = require('path');
const webpack = require('webpack');
// Remove this line once the following warning goes away (it was meant for webpack loader authors not users):
// 'DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic,
// see https://github.com/webpack/loader-utils/issues/56 parseQuery() will be replaced with getOptions()
// in the next major version of loader-utils.'
// process.noDeprecation = true;
module.exports = (options) => ({
entry: options.entry,
output: Object.assign({ // Compile into js/build.js
path: path.resolve(process.cwd(), 'build'),
publicPath: '/',
}, options.output), // Merge with env dependent settings
module: {
rules: [
{
test: /\.js$/, // Transform all .js files required somewhere with Babel
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: [
"transform-object-assign",
["transform-es2015-arrow-functions", { "spec": true }],
["transform-class-properties", { "spec": true }],
'transform-es2015-classes',
'transform-es2015-modules-commonjs',
'transform-es2015-function-name',
],
presets: ["es2015", "stage-2", "react" ]
},
},
},
{
// Preprocess our own .css files
// This is the place to add your own loaders (e.g. sass/less etc.)
// for a list of loaders, see https://webpack.js.org/loaders/#styling
test: /\.css$/,
exclude: /node_modules/,
// use: ['style-loader', 'css-loader'],
use: options.cssLoaders,
},
{
// Preprocess 3rd party .css files located in node_modules
test: /\.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(eot|svg|otf|ttf|woff|woff2)$/,
use: 'file-loader',
},
{
test: /\.(jpg|png|gif)$/,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
progressive: true,
optimizationLevel: 7,
interlaced: false,
pngquant: {
quality: '65-90',
speed: 4,
},
},
},
],
},
{
test: /\.html$/,
use: 'html-loader',
},
{
test: /\.json$/,
use: 'json-loader',
},
{
test: /\.(mp4|webm)$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
},
},
},
],
},
plugins: options.plugins.concat([
new webpack.ProvidePlugin({
// make fetch available
fetch: 'exports-loader?self.fetch!whatwg-fetch',
}),
// Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
// inside your code for any environment checks; UglifyJS will automatically
// drop any unreachable code.
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
},
}),
new webpack.NamedModulesPlugin(),
]),
resolve: {
modules: ['app', 'node_modules'],
extensions: [
'.js',
'.jsx',
'.react.js',
],
mainFields: [
'browser',
'jsnext:main',
'main',
],
},
devtool: options.devtool,
target: 'web', // Make web variables accessible to webpack, e.g. window
performance: options.performance || {},
});Here is the webpack.prod.babel.js
// Important modules this config uses
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OfflinePlugin = require('offline-plugin');
const Clean = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = require('./webpack.base.babel')({
// In production, we skip all hot-reloading stuff
entry: [
path.join(process.cwd(), 'app/app.js'),
],
// Utilize long-term caching by adding content hashes (not compilation hashes) to compiled assets
output: {
filename: '[name].[chunkhash].js',
chunkFilename: '[name].[chunkhash].chunk.js',
},
// We use ExtractTextPlugin so we get a seperate CSS file instead
// of the CSS being in the JS and injected as a style tag
cssLoaders: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: {
loader: 'css-loader',
options: {
camelCase: true,
modules: true,
importLoaders: 1,
},
},
}),
plugins: [
new Clean(['build']),
new webpack.optimize.ModuleConcatenationPlugin(),
new ExtractTextPlugin({
filename: '[name].[contenthash].css',
ignoreOrder: true,
allChunks: true,
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
children: true,
minChunks: 2,
async: true,
}),
// Minify and optimize the index.html
new HtmlWebpackPlugin({
template: 'app/404.html',
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
inject: true,
}),
new HtmlWebpackPlugin({
template: 'app/index.html',
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
inject: true,
}),
new HtmlWebpackPlugin({
template: 'app/500.html',
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
inject: true,
}),
// Put it in the end to capture all the HtmlWebpackPlugin's
// assets manipulations and do leak its manipulations to HtmlWebpackPlugin
new OfflinePlugin({
relativePaths: false,
publicPath: '/',
// No need to cache .htaccess. See http://mxs.is/googmp,
// this is applied before any match in `caches` section
excludes: ['.htaccess'],
caches: {
main: [':rest:'],
// All chunks marked as `additional`, loaded after main section
// and do not prevent SW to install. Change to `optional` if
// do not want them to be preloaded at all (cached only when first loaded)
additional: ['*.chunk.js'],
},
// Removes warning for about `additional` section usage
safeToUseOptionalCaches: true,
AppCache: false,
}),
],
performance: {
assetFilter: (assetFilename) => !(/(\.map$)|(^(main\.|favicon\.))/.test(assetFilename)),
},
});Tried options:
- I have tried to add modules to precompile the code down first, as a lot of posts seem to say that uglifyJS only reads ES5. I have tried all the ones I can think of that are relevant. Maybe I missed one?
- I have also tried to re-order the plugins in the
webpack.base.babel.jsfile. and reorder the presets as well. Either nothing happens or it brings up another error of the same kind.
It's probably something small.. Any ideas what I am doing wrong? Or how to fix?
Versions
React-Boilerplate: 3.5.0
Node/NPM: 6.1.0
