Failure to start localhost. npm Err Darwin 16.7.0 - javascript

So I have an older project that I am trying to work on again, and when I type in the command npm start in terminal I get a very long error message. Here it is.
# start /Users/juanlopez/tiy/week-5/day-4/portfolio-2.0
webpack-dev-server
/Users/juanlopez/tiy/week-5/day-4/portfolio-2.0/webpack.config.js:88
new webpack.optimize.OccurenceOrderPlugin(),
^
TypeError: webpack.optimize.OccurenceOrderPlugin is not a constructor
at Object. (/Users/juanlopez/tiy/week-5/day-4/portfolio-2.0/webpack.config.js:88:5)
After these errors in web pack npm throws these errors
npm ERR! Darwin 16.7.0
npm ERR! argv "/usr/local/Cellar/node/7.1.0/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v7.1.0
npm ERR! npm v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! # start: webpack-dev-server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # start script 'webpack-dev-server'.
Does anyone know what I did wrong here? Is it something to do with the version of webpack I am running? I have already tried updating webpack and node.
Here is my JSON
{
"private": true,
"scripts": {
"deploy": "npm run build && surge ./public --domain portfolio-2-0.chriskramer2020.surge.sh",
"start": "webpack-dev-server",
"build": "rm -rf public && NODE_ENV=production webpack --optimize-minimize --progress --profile --colors"
},
"dependencies": {
"extract-text-webpack-plugin": "^2.1.0",
"jquery": "^3.1.1",
"json-loader": "^0.5.4",
"mobx": "^3.0.0",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-router": "^3.0.1",
"whatwg-fetch": "^2.0.1"
},
"devDependencies": {
"autoprefixer": "^6.5.4",
"babel-core": "^6.20.0",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"browser-sync": "^2.18.5",
"browser-sync-webpack-plugin": "^1.1.3",
"css-loader": "^0.26.1",
"eslint": "^3.12.2",
"eslint-config-standard": "^6.2.1",
"eslint-config-standard-react": "^4.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-react": "^6.8.0",
"eslint-plugin-standard": "^2.0.1",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.24.1",
"json-loader": "^0.5.4",
"node-sass": "^4.0.0",
"postcss-loader": "^1.2.1",
"raw-loader": "^0.5.1",
"react-hot-loader": "next",
"sass-loader": "^4.1.0",
"style-loader": "^0.13.1",
"stylelint": "^7.6.0",
"stylelint-config-standard": "^15.0.0",
"surge": "^0.18.0",
"webpack": "^2.3.2",
"webpack-dev-server": "^2.4.2",
"webpack-merge": "^1.1.1",
"webpack-validator": "^2.3.0"
}
}
Here is my Webpack.config
enter code here
const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const validate = require('webpack-validator')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
const ROOT_PATH = path.resolve(__dirname)
const SRC_PATH = path.resolve(ROOT_PATH, 'src')
const BUILD_PATH = path.resolve(ROOT_PATH, 'public')
const common = {
entry: [
'whatwg-fetch',
SRC_PATH
],
output: {
filename: 'bundle.js',
path: BUILD_PATH,
publicPath: '/'
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(SRC_PATH, 'index.html'),
inject: 'body',
filename: 'index.html'
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}
})
],
module: {
loaders: [{
test: /\.js$/,
include: [SRC_PATH],
loader: 'babel'
}, {
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'file'
}, {
test: /\.(sass|s?css)$/,
loaders: [
'style',
'css',
'postcss',
'sass'
]
}]
},
postcss: () => {
return [
require('autoprefixer')
]
}
}
const development = {
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server'
],
output: {
devtoolModuleFilenameTemplate: '[resource-path]'
},
devServer: {
historyApiFallback: true,
hot: true,
stats: { colors: true, chunks: false }
},
plugins: [
new webpack.HotModuleReplacementPlugin({ multiStep: true }),
new webpack.SourceMapDevToolPlugin(),
new BrowserSyncPlugin({ proxy: 'http://localhost:8080/' }, { reload: false })
],
module: {
loaders: [{
test: /\.html$/,
loader: 'raw'
}]
}
}
loaders: [
{
test: /\.css$/,
loaders: [
"style-loader",
{ loader: "css-loader", query: { modules: true } },
{
loader: "sass-loader",
query: {
includePaths: [
path.resolve(__dirname, "some-folder")
]
}
}
]
}
]
const production = {
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
]
}
new webpack.LoaderOptionsPlugin({
test: /\.css$/, // optionally pass test, include and exclude, default affects
all loaders
minimize: true,
debug: false,
options: {
// pass stuff to the loader
}
})
module.exports = validate(merge.smart(
process.env.npm_lifecycle_event === 'build'
? production
: development,
common
))


you need to use OccurrenceOrderPlugin instead of OccurenceOrderPlugin.
and one more thing you don't need this plugin anymore, now occurrence order is on by default
https://gist.github.com/sokra/27b24881210b56bbaff7#occurrence-order

Related

After migrating vuejs 2 to 3 i am getting webpack errors Uncaught ReferenceError: vue is not defined

I was trying to update my vue 2 to vue 3 project. i upgraded my project with the use vue plugin. and it update my project but when i run my project.it gives me error of Uncaught ReferenceError: vue is not defined.and after so many tries i am not able to solve it.and i dont have too much knowledge about webpack.so please check it and let me know how to fix it.
here is my package.json file
{
"name": "shopify-theme-lab",
"version": "2.6.2",
"description": "Customizable modular development environment for blazing-fast Shopify theme creation",
"author": "Sergej Samsonenko <contact#sergej.codes>",
"scripts": {
"build": "cross-env NODE_ENV=production BROWSERSLIST_ENV=production BROWSERSLIST_CONFIG=.config/.browserslistrc node_modules/.bin/webpack --config .config/webpack/webpack.prod.js",
"lint": "npm-run-all lint:*",
"deploy:dev": "shopify-themekit deploy --env=dev --config .config/shopify/shopify.dev.yml --allow-live",
"deploy:live": "shopify-themekit deploy --env=live --config .config/shopify/shopify.live.yml",
"dev": "cross-env NODE_ENV=development BROWSERSLIST_ENV=development BROWSERSLIST_CONFIG=.config/.browserslistrc node_modules/.bin/webpack --config .config/webpack/webpack.dev.js --watch",
"lint-fix": "node_modules/.bin/eslint --fix src/**/*.{js,vue} --config .config/.eslintrc.js",
"lint:css": "node_modules/.bin/stylelint src/**/*.{vue,css,sass,scss} --config .config/.stylelintrc.js",
"lint:js": "node_modules/.bin/eslint src/**/*.{js,vue} --config .config/.eslintrc.js",
"open:dev": "shopify-themekit open --env=dev --config .config/shopify/shopify.dev.yml",
"open:live": "shopify-themekit open --env=live --config .config/shopify/shopify.live.yml",
"reloader": "node node_modules/shopify-theme-lab-reloader",
"settings:dev": "shopify-themekit --env=dev download config/settings_data.json --config .config/shopify/shopify.dev.yml",
"settings:live": "shopify-themekit --env=live download config/settings_data.json --config .config/shopify/shopify.live.yml",
"shopify:init": "npx themelab shopify:init",
"shopify:themes": "shopify-themekit get --list",
"shopify:watch": "cross-env-shell shopify-themekit watch --env=dev --allow-live --config .config/shopify/shopify.dev.yml --notify=http://localhost:$npm_package_config_reloader_serverPort/reload",
"start": "npm-run-all --parallel --silent --race dev reloader shopify:watch"
},
"dependencies": {
"axios": "^0.21.1",
"bootstrap": "4.5.3",
"bootstrap-vue": "^2.21.2",
"dotenv": "^10.0.0",
"lazysizes": "^5.3.2",
"shopify-buy": "^2.11.0",
"universal-cookie": "^4.0.4",
"v-calendar": "^2.3.2",
"vue": "^3.2.20",
"vue-carousel": "^0.18.0",
"vue-moment": "^4.1.0",
"vuex": "^4.0.2"
},
"devDependencies": {
"#babel/core": "^7.13.16",
"#babel/plugin-transform-runtime": "^7.13.15",
"#babel/preset-env": "^7.13.15",
"#shopify/themekit": "^1.1.7",
"#vue/compiler-sfc": "^3.2.20",
"autoprefixer": "^10.2.5",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"cross-env": "^7.0.3",
"css-loader": "^5.2.4",
"css-minimizer-webpack-plugin": "^2.0.0",
"eslint": "^7.25.0",
"eslint-plugin-vue": "^7.9.0",
"eslint-webpack-plugin": "^2.5.4",
"file-loader": "^6.2.0",
"glob-all": "^3.2.1",
"html-webpack-plugin": "^5.3.2",
"mini-css-extract-plugin": "^1.5.0",
"npm-run-all": "^4.1.5",
"postcss": "^8.2.13",
"postcss-import": "^14.0.1",
"postcss-loader": "^5.2.0",
"postcss-preset-env": "^6.7.0",
"progress-webpack-plugin": "^1.0.12",
"purgecss-webpack-plugin": "^4.0.3",
"sass": "^1.32.12",
"sass-loader": "^11.0.1",
"shopify-theme-lab-reloader": "^2.1.3",
"style-loader": "^2.0.0",
"stylelint": "^13.13.0",
"stylelint-config-recommended": "^5.0.0",
"stylelint-webpack-plugin": "^2.1.1",
"url-loader": "^4.1.1",
"vue-cli-plugin-vue-next": "~0.1.4",
"vue-loader": "^16.8.2",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.35.1",
"webpack-cli": "^4.6.0",
"webpack-merge": "^5.7.3"
},
"config": {
"reloader": {
"serverPort": 5000,
"webSocketPort": 5050,
"delay": 2000,
"indicator": true
}
},
"license": "MIT"
}
and here is my webpack file
const { cacheTimestamp } = require("./cacheBuster");
const webpack = require("webpack");
const path = require("path");
const glob = require("glob");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ProgressPlugin = require("progress-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const dotenv = require("dotenv").config({
path: path.join(__dirname, "../.env"),
});
const entries = glob
.sync(path.resolve(__dirname, "../../src/layout/*"))
.reduce((entries, entry) => {
const entryName = path.parse(entry).name;
entries[`layout-${entryName}`] = path.resolve(__dirname, entry);
return entries;
}, {});
module.exports = {
stats: "minimal",
entry: entries,
output: {
path: path.resolve(__dirname, "../../shopify/assets/"),
filename: `[name].${cacheTimestamp}.js`,
clean: {
dry: true,
},
},
optimization: {
moduleIds: "named",
mergeDuplicateChunks: false,
splitChunks: {
cacheGroups: {
default: false,
commons: {
test: /[\\/]node_modules[\\/]((?!(moment)).*)[\\/]/,
name: "vendors",
chunks: "all",
},
},
},
},
resolve: {
extensions: ["*", ".js", ".vue", ".json"],
alias: {
"#": path.resolve(__dirname, "../../src/"),
$: path.resolve(__dirname, "../../shopify/"),
},
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: "url-loader",
options: {
limit: 8192,
},
},
],
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "/",
},
},
],
},
],
},
external: {
vue: "Vue",
},
plugins: [
new VueLoaderPlugin(),
new ProgressPlugin(),
/**
* don't clean files with the 'static' keyword in their filename
* docs: https://github.com/johnagan/clean-webpack-plugin
*/
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ["**/*", "!*static*"],
}),
new HtmlWebpackPlugin({
excludeChunks: ["static"],
template: path.resolve(__dirname, "./script-tags.html"),
filename: path.resolve(
__dirname,
"../../shopify/snippets/script-tags.liquid"
),
inject: false,
minify: {
removeComments: true,
removeAttributeQuotes: false,
collapseWhitespace: true,
},
meta: {
cacheTimestamp,
},
}),
new HtmlWebpackPlugin({
excludeChunks: ["static"],
template: path.resolve(__dirname, "./style-tags.html"),
filename: path.resolve(
__dirname,
"../../shopify/snippets/style-tags.liquid"
),
inject: false,
minify: {
removeComments: true,
removeAttributeQuotes: false,
collapseWhitespace: true,
},
meta: {
cacheTimestamp,
},
}),
new webpack.DefinePlugin({
"process.env": JSON.stringify(dotenv.parsed),
}),
],
};
please check it let me know if we can change anything to fix it.

Not able to build project using webpack and babel

I am building a React app from scratch using webpack and babel. I have all the rules, babel configurations in place. I have setup my application with three config files for webpack:
dev config
prod config
common items across both configs (rules, variables, aliases etc).
When I am trying to start my application locally (development) using webpack-dev-server, I get an error on line import merge from 'webpack-merge'
Command used : webpack-dev-server --config webpack.config.dev.babel.js --open
SyntaxError: Cannot use import statement outside a module
at Module._compile (internal/modules/cjs/loader.js:891:18)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Module.require (internal/modules/cjs/loader.js:848:19)
at require (internal/modules/cjs/helpers.js:74:18)
at WEBPACK_OPTIONS (C:\Users\hp-pc\node_modules\webpack-cli\bin\convert-argv.js:115:13)
at requireConfig (C:\Users\hp-pc\node_modules\webpack-cli\bin\convert-argv.js:117:6)
at C:\Users\hp-pc\node_modules\webpack-cli\bin\convert-argv.js:124:17
at Array.forEach (<anonymous>)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I am not able to figure out where the issue is exactly
Possible fixes that I tried :
Deleting node_modules and doing a fresh install.
Updating all dependencies using yarn-upgrade-all.
Setting a react project with webpack and babel from scratch.
SO Answer.
Adding "type":"module" to package.json.
None of these have worked for me so far. Can anyone please guide me on how to resolve this issue?
Here are a few files which might help troubleshoot this further :
package.json
{
"name": "weather-app",
"version": "0.0.1",
"private": true,
"dependencies": {
"autoprefixer": "^10.2.5",
"axios": "^0.21.1",
"classnames": "^2.3.1",
"copy-webpack-plugin": "^8.1.0",
"dotenv": "^8.2.0",
"git-revision-webpack-plugin": "^3.0.6",
"html-webpack-plugin": "^5.3.1",
"mini-css-extract-plugin": "^1.4.0",
"moment": "^2.29.1",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-debounce-input": "^3.2.3",
"react-dom": "^17.0.2",
"react-redux": "^7.2.3",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0"
},
"devDependencies": {
"#babel/cli": "^7.13.14",
"#babel/core": "^7.13.14",
"#babel/node": "^7.13.13",
"#babel/plugin-transform-modules-commonjs": "^7.13.8",
"#babel/plugin-transform-regenerator": "^7.12.13",
"#babel/plugin-transform-runtime": "^7.13.10",
"#babel/preset-env": "^7.13.12",
"#babel/preset-flow": "^7.13.13",
"#babel/preset-react": "^7.13.13",
"#babel/register": "^7.13.14",
"babel-loader": "^8.2.2",
"babel-plugin-react-display-name": "^2.0.0",
"babel-plugin-webpack-alias": "^2.1.2",
"babel-preset-react-hmre": "^1.1.1",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"chai": "^4.3.4",
"chalk": "^4.1.0",
"css-loader": "^5.2.0",
"enzyme": "^3.11.0",
"eslint": "^7.23.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.23.1",
"node-sass": "^5.0.0",
"terser-webpack-plugin": "^5.1.1",
"webpack": "^5.30.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3",
"webpack-notifier": "^1.13.0"
},
"scripts": {
"start:dev": "webpack-dev-server --config webpack.config.dev.babel.js --open",
"start:mock": "nodemon mockAPI.js",
"update:packages": "node wipe-dependencies.js && rm -rf node_modules && npm update --save-dev && npm update --save"
},
"lint-staged": {
"*.js": [
"eslint --fix",
"git add"
]
},
"nyc": {
"exclude": [
"**/*.spec.js",
"dist",
"docs",
"helpers",
"node_modules",
"styleguide",
"webpack*"
],
"extensions": [
".js",
".jsx"
]
}
}
webpack.config.dev.babel.js
/* eslint-disable import/no-extraneous-dependencies */
import merge from 'webpack-merge';
import Notifier from 'webpack-notifier';
import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
import common from './webpack.common';
module.exports = merge(common, {
mode: 'development',
devtool: 'source-map',
devServer: {
contentBase: './app/src',
historyApiFallback: true,
},
plugins: [
new Notifier(),
new CaseSensitivePathsPlugin(),
],
});
webpack.common.js
import path from 'path';
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import GitRevisionPlugin from 'git-revision-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
const gitRevisionPlugin = new GitRevisionPlugin();
const buildDateTime = new Date().toISOString();
const htmlConfig = {
template: 'index.html',
filename: 'index.html',
inject: true,
data: {
__VERSION__: JSON.stringify(gitRevisionPlugin.version()),
__COMMITHASH__: JSON.stringify(gitRevisionPlugin.commithash()),
__BRANCH__: JSON.stringify(gitRevisionPlugin.branch()),
__BUILDDATETIME__: buildDateTime,
},
};
module.exports = {
context: path.resolve(__dirname, './app/src'),
entry: {
app: ['./index.jsx'],
},
output: {
path: path.resolve(__dirname, './app/dist'),
publicPath: '/',
filename: '[name].[chunkhash].js',
},
module: {
rules: [
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader?name=assets/fonts/[name].[ext]',
],
},
{
test: /(\.js|\.jsx)$/,
loader: 'babel-loader',
exclude: [/node_modules/],
include: [path.resolve(__dirname, './node_modules/react-icons/fa'), path.resolve(__dirname, './node_modules/react-onclickoutside')],
query: {
presets: [['#babel/env',
{
useBuiltIns: 'usage',
corejs: 3,
},
],
'#babel/react',
'#babel/flow'],
plugins: ['#babel/plugin-syntax-dynamic-import', '#babel/plugin-transform-regenerator', '#babel/plugin-proposal-class-properties', '#babel/plugin-transform-runtime', 'transform-class-properties'],
},
},
{
test: /\.(png|jpg|svg|ico)$/,
loader: 'file-loader',
},
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[hash].css',
chunkFilename: '[id].[hash].css',
}),
new HtmlWebpackPlugin(htmlConfig),
],
resolve: {
alias: {
Actions: path.resolve(__dirname, 'app/src/actions'),
Components: path.resolve(__dirname, 'app/src/components/'),
Containers: path.resolve(__dirname, 'app/src/containers/'),
Helpers: path.resolve(__dirname, 'helpers/'),
Selectors: path.resolve(__dirname, 'app/src/selectors/'),
Utils: path.resolve(__dirname, 'app/src/utils'),
Assets: path.resolve(__dirname, 'app/src/assets'),
Apis: path.resolve(__dirname, 'app/src/api'),
},
extensions: ['.js', '.jsx', '.json', '*'],
},
};
.babelrc
{
"presets": [
"#babel/env",
"#babel/preset-react",
"#babel/preset-flow"
],
"env": {
"test": {
"plugins": [
"#babel/plugin-transform-regenerator",
"#babel/plugin-syntax-dynamic-import",
[
"#babel/plugin-transform-runtime",
{
"regenerator": true
}
],
[
"module-resolver",
{
"alias": {
"Actions": "./app/src/actions",
"Assets": "./app/src/assets",
"Components": "./dims-common-ui/components/",
"Containers": "./app/src/containers",
"Helpers": "./helpers",
"Selectors": "./app/src/selectors",
"Utils": "./app/src/utils",
"Apis": "./app/src/api"
}
}
],
"#babel/plugin-proposal-class-properties"
]
}
}
}

On the webpack-merge readme, there are no examples using the pattern you used. Where did you see this? Have you tried to emulate the pattern of the docs? What I think this means is you define your config externally, and then run a function who returns the merge. Have you tried this?
module.exports = env => {
switch(env) {
case 'development':
return merge(commonConfig, developmentConfig);
case 'production':
return merge(commonConfig, productionConfig);
default:
throw new Error('No matching configuration was found!');
}
}

you need to tell babel what it needs to transpile and you do so with #babel/register so at yow entry point you need some like this
module.exports ={
entry: [
"#babel/register",
"path-to-where-your-entry-is-at"
]
}

So, the solution that worked for me was using webpack 4 instead of webpack as there seems to be some issue with webpack 5 and babel 7 in my use case. Thanks for your answers Ernesto and IWI!

node.js : webpack : Babel : Unknown substitution "BODY" given

I am a newbie with node.js. Below is what I get when I run "npm run build-web" (that runs "webpack --progress" and copy the results). Any help will be appreciated.
Child centerPin:
Hash: 92640a144e27eefff6af
Time: 1663ms
Built at: 02/28/2019 5:07:50 PM
1 asset
Entrypoint centerPin = centerPin.bundle.js
[0] ./src/screens/resources/web/lib/centerPin.js 5.83 KiB {0} [built] [failed] [1 error]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or
'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
ERROR in ./src/screens/resources/web/lib/centerPin.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Unknown substitution "BODY" given
at Object.keys.forEach.key (/home/accent/code/treecheckerapp/app/treeChecker/node_modules/#babel/template/lib/populate.js:35:15)
at Array.forEach (<anonymous>)
at populatePlaceholders (/home/accent/code/treecheckerapp/app/treeChecker/node_modules/#babel/template/lib/populate.js:33:31)
This is my package.json :
{ "name": "treeChecker", "version": "0.0.1", "private": true, "scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"build": "webpack",
"build-web": "webpack --progress && cp -r \"./src/screens/resources/web\" \"./android/app/src/main/assets\"",
"android-linux": "react-native bundle --platform android --dev false --entry-file index.android.js --bundle-out put android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-and roid",
"bundle": "react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output and roid/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
"android-linux-rel": "react-native bundle --platform android --dev false --entry-file index.android.js --bundle
-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run
-android --variant=release" }, "dependencies": {
"axios": "^0.18.0",
"lodash": "^4.17.4",
"npm-check-updates": "^2.15.0",
"react": "16.8.3",
"react-native": "0.58.5",
"react-native-autocomplete-input": "^3.4.0",
"react-native-button-component": "^0.2.28",
"react-native-elements": "^1.1.0",
"react-native-fs": "^2.8.1",
"react-native-image-picker": "^0.28.0",
"react-native-localization": "^2.1.0",
"react-native-offline": "^4.3.0",
"react-native-progress": "^3.4.0",
"react-native-router-flux": "^4.0.0-beta.21",
"react-native-simple-compass": "^1.0.0",
"react-native-simple-dialogs": "^1.1.0",
"react-native-spinkit": "^1.1.1",
"react-native-static-server": "^0.4.1",
"react-native-toast-native": "^1.2.1",
"react-native-vector-icons": "^6.3.0",
"react-native-viewpager": "^0.2.13",
"react-native-webview-messaging": "^1.1.0",
"react-navigation": "^3.3.2",
"react-redux": "^6.0.1",
"redux": "^4.0.1",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.2.0" }, "devDependencies": {
"async": "^2.6.2",
"babel-core": "^6.26.3",
"babel-jest": "24.1.0",
"babel-loader": "^8.0.5",
"babel-preset-env": "^1.6.0",
"babel-preset-react-native": "4.0.1",
"eslint-config-rallycoding": "^3.2.0",
"html-webpack-inline-source-plugin": "0.0.10",
"html-webpack-plugin": "^3.2.0",
"jest": "24.1.0",
"path": "^0.12.7",
"react-test-renderer": "16.8.3",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3" }, "jest": {
"preset": "react-native" } }
This is my webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
module.exports = [
{
name: "createAOI",
entry: {
createAOI: './src/screens/resources/web/lib/createAOI.js',
},
output: {
path: path.join(__dirname, 'src/screens/resources/web/'),
filename: 'createAOI.bundle.js',
},
module: {
rules: [{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
['env', {
targets: {
browsers: ['last 2 versions', 'safari >= 9.3']
}
}]
]
}
}
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/screens/resources/web/createAOI.tpl.html',
inlineSource: 'createAOI.bundle.js',
filename: 'createAOI.html',
cache: false,
}),
new HtmlWebpackInlineSourcePlugin(),
]
},
{
name: "baseMap",
entry: {
baseMap: './src/screens/resources/web/lib/baseMap.js',
},
output: {
path: path.join(__dirname, 'src/screens/resources/web/'),
filename: 'baseMap.bundle.js',
},
module: {
rules: [{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
['env', {
targets: {
browsers: ['last 2 versions', 'safari >= 9.3']
}
}]
]
}
}
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/screens/resources/web/baseMap.tpl.html',
inlineSource: 'baseMap.bundle.js',
filename: 'baseMap.html',
cache: false,
}),
new HtmlWebpackInlineSourcePlugin(),
]
},
{
name: "centerPin",
entry: {
centerPin: './src/screens/resources/web/lib/centerPin.js',
},
output: {
path: path.join(__dirname, 'src/screens/resources/web/'),
filename: 'centerPin.bundle.js',
},
module: {
rules: [{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
['env', {
targets: {
browsers: ['last 2 versions', 'safari >= 9.3']
}
}]
]
}
}
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/screens/resources/web/centerPin.tpl.html',
inlineSource: 'centerPin.bundle.js',
filename: 'centerPin.html',
cache: false,
}),
new HtmlWebpackInlineSourcePlugin(),
]
},
]

Usually you get this error when some babel plugin or preset has different version than babel core. Try updating it to the same version.
https://github.com/babel/babel/issues/7801

webpack: custom style is missing after production build

I've updated my webpack file. Now it's won't apply my custom style to the main style bundle. No errors, classes with custom style just missing in bundle.
When I'm running build with development mode - everything is ok and my styles are exist in the bundle. Such happens only with production build.
I tried extract-text-webpack-plugin instead mini-css-extract-plugin but result is same - in prod build my styles are missing.
I'll be very apriciated for any kind of help.
Here is files:
webpack.config.js
const path = require('path');
const fs = require('fs');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const autoprefixer = require('autoprefixer');
const lessToJs = require('less-vars-to-js');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const publicPath = 'public';
const themeVariables = lessToJs(
fs.readFileSync(path.join(__dirname, './assets/style/ant-theme-vars.less'), 'utf8'),
);
module.exports = (env, options) => {
const mode = env ? env.mode : options.mode;
return {
entry: './assets/app.jsx',
output: {
path: path.resolve(__dirname, publicPath),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers: 'last 2 version',
}),
],
},
},
{
loader: 'less-loader',
options: {
javascriptEnabled: true,
modifyVars: themeVariables,
},
},
],
},
{
test: /\.s?css$/,
exclude: [/node_modules/],
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers: 'last 2 version',
}),
],
},
},
{
loader: 'sass-loader',
},
],
},
{
test: /\.jsx?$/,
exclude: [/node_modules/],
loaders: ['babel-loader'],
resolve: { extensions: ['.js', '.jsx'] },
},
{
test: /\.(png|jpg|jpeg|gif|svg|ico)$/,
exclude: [/node_modules/],
use: [
{
loader: 'file-loader',
options: {
name: 'img/[name].[ext',
},
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 70,
},
},
},
],
},
{
test: /\.(otf|ttf|woff|woff2)$/,
exclude: [/node_modules/],
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]',
},
},
],
},
plugins: [
new CleanWebpackPlugin(publicPath, {}),
new MiniCssExtractPlugin({
filename: 'bundle.css',
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './assets/www/index.html',
}),
],
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: true,
mangle: true,
warnings: false,
drop_console: true,
unsafe: true,
},
sourceMap: true,
}),
],
},
devServer: {
contentBase: path.join(__dirname),
compress: true,
port: 9000,
publicPath: '/',
historyApiFallback: true,
},
devtool: mode === 'development' ? 'cheap-inline-module-source-map' : '',
};
};
package.json
{
"name": "react-templates",
"version": "1.0.0",
"description": "",
"main": "bundle.js",
"sideEffects": false,
"scripts": {
"build": "webpack --progress --mode production",
"build-dev": "webpack -p --progress --mode development",
"start": "webpack-dev-server --mode production --open",
"eslint": "eslint . --ext .js --ext .jsx",
"stylelint": "stylelint assets/scss",
"deploy-current-branch-dev": "npm run build-dev && firebase deploy",
"deploy-dev": "git checkout -- . && git clean -fd && git checkout develop && git remote update && git pull && npm run build-dev && firebase deploy"
},
"author": "",
"license": "ISC",
"dependencies": {
"antd": "3.8.2",
"autoprefixer": "9.0.1",
"brace": "0.11.1",
"clean-webpack-plugin": "0.1.19",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"fast-async": "^6.3.8",
"file-system": "2.2.2",
"firebase": "5.3.0",
"history": "4.7.2",
"html-webpack-plugin": "^3.2.0",
"less-vars-to-js": "1.3.0",
"lodash": "^4.17.11",
"mini-css-extract-plugin": "^0.4.3",
"moment": "2.22.2",
"optimize-css-assets-webpack-plugin": "5.0.0",
"prop-types": "15.6.2",
"react": "15.6.1",
"react-ace": "6.1.4",
"react-copy-to-clipboard": "5.0.1",
"react-dom": "15.6.1",
"react-favicon": "0.0.14",
"react-redux": "5.0.7",
"react-router": "4.3.1",
"react-router-dom": "4.3.1",
"react-sticky": "^6.0.3",
"redux": "4.0.0",
"redux-devtools-extension": "2.13.5",
"redux-logger": "3.0.6",
"redux-thunk": "2.3.0",
"uglifyjs-webpack-plugin": "^2.0.1",
"webpack": "^4.16.1",
"webpack-merge": "^4.1.4"
},
"devDependencies": {
"#babel/core": "^7.1.2",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"babel-eslint": "8.2.6",
"babel-loader": "^8.0.4",
"babel-plugin-import": "^1.9.1",
"css-loader": "1.0.0",
"eslint": "4.19.1",
"eslint-config-airbnb": "17.0.0",
"eslint-plugin-import": "2.12.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "7.9.1",
"file-loader": "^2.0.0",
"husky": "1.0.0-rc.13",
"image-webpack-loader": "^4.3.1",
"less": "3.8.1",
"less-loader": "4.1.0",
"node-sass": "4.9.2",
"postcss-loader": "2.1.6",
"sass-loader": "7.0.3",
"style-loader": "0.21.0",
"stylelint": "9.4.0",
"stylelint-config-recommended": "2.1.0",
"webpack-bundle-analyzer": "^3.0.2",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
},
"husky": {
"hooks": {
"pre-commit": "npm run eslint && npm run stylelint"
}
}
}
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties",
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
}

The probplem is sideEffects: false in my package.json file.
I found an issue on Github and there are some issues related to it.
Main reason I did it - I wanted to make a tree shank in my development mode. It worked as I expected but in production mode all my custom styles are missing. To solve this problem I just removed sideEffects: false. So I lost tree shank in dev mode (think it's not good solution to make it in development mode but however).

Building for production causes errors in module package.json

Not sure what's going on, when I do a prod build ("cross-env NODE_ENV=production API_V=production npm run build") I get this error from from react-player:
ERROR in ./node_modules/react-player/lib/ReactPlayer.js Module build
failed: ReferenceError: Unknown plugin
"transform-es3-member-expression-literals" specified in
"C:\work\website\node_modules\react-player\package.json.env.production"
at 0, attempted to resolve relative to
"C:\work\website\node_modules\react-player"
I'm already excluding node_modules from babel:
rules: [
{
test: /\.js$/, // Transform all .js files required somewhere with Babel
exclude: /node_modules\/(?!(react-redux-toastr)\/).*/,
use: {
loader: 'babel-loader',
options: options.babelQuery,
},
},
As per request,
webpack.base.babel.js:
/**
* COMMON WEBPACK CONFIGURATION
*/
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = options => ({
mode: options.mode,
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
optimization: options.optimization,
node: {
fs: 'empty',
net: 'empty',
},
module: {
rules: [
{
test: /\.js$/, // Transform all .js files required somewhere with Babel
exclude: /node_modules\/(?!(react-redux-toastr)\/).*/,
use: {
loader: 'babel-loader',
options: options.babelQuery,
},
},
{
test: /\.(scss|css)$/,
use: [
{
loader:
options.mode === 'development'
? 'style-loader'
: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
sourceMap: process.env.NODE_ENV === 'development',
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: process.env.NODE_ENV === 'development',
},
},
{
loader: 'sass-loader',
options: {
sourceMap: process.env.NODE_ENV === 'development',
},
},
],
},
{
test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
exclude: /images/,
use: 'file-loader',
},
{
test: /\.(jpg|png|gif)$/,
use: [
{
loader: 'file-loader',
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
},
optipng: {
optimizationLevel: 7,
},
gifsicle: {
interlaced: false,
},
pngquant: {
quality: '65-90',
speed: 4,
},
},
},
],
},
{
test: /\.svg$/,
include: /sprite/,
use: 'svg-sprite-loader',
},
{
test: /\.svg$/,
use: 'url-loader',
exclude: /sprite/,
},
{
test: /\.html$/,
use: 'html-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),
API_V: JSON.stringify(process.env.API_V),
CONTENT_PREVIEW: JSON.stringify(process.env.CONTENT_PREVIEW),
},
}),
]),
resolve: {
modules: ['app', 'node_modules'],
extensions: ['.js', '.jsx', '.react.js'],
mainFields: ['browser', 'main', 'jsnext:main'],
},
devtool: options.devtool,
target: 'web', // Make web variables accessible to webpack, e.g. window
performance: options.performance || {},
});
webpack.projd.babel.js:
// Important modules this config uses
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackPwaManifest = require('webpack-pwa-manifest');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { HashedModuleIdsPlugin } = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = require('./webpack.base.babel')({
mode: 'production',
// 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',
},
optimization: {
minimize: true,
nodeEnv: 'production',
sideEffects: true,
concatenateModules: true,
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.(scss|css)$/,
chunks: 'all',
enforce: true,
},
},
},
runtimeChunk: true,
},
plugins: [
// Minify and optimize the index.html
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 WebpackPwaManifest({
name: 'LEDA',
short_name: 'LEDA',
description: '',
background_color: '#ffffff',
theme_color: '#00bae4',
icons: [
{
src: path.resolve('app/images/favicon.png'),
sizes: [72, 96, 120, 128, 144, 152, 167, 180, 192],
},
],
}),
new HashedModuleIdsPlugin({
hashFunction: 'sha256',
hashDigest: 'hex',
hashDigestLength: 20,
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
new UglifyJsPlugin({
parallel: true,
uglifyOptions: {
ecma: 6,
},
cache: path.join(__dirname, 'webpack-cache/uglify-cache'),
}),
],
performance: {
assetFilter: assetFilename =>
!/(\.map$)|(^(main\.|favicon\.))/.test(assetFilename),
},
});
webpack.dev.babel.js:
/**
* DEVELOPMENT WEBPACK CONFIGURATION
*/
const path = require('path');
const fs = require('fs');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');
const logger = require('../../server/logger');
const cheerio = require('cheerio');
const pkg = require(path.resolve(process.cwd(), 'package.json'));
const dllPlugin = pkg.dllPlugin;
const plugins = [
new webpack.ContextReplacementPlugin(
/\.\/locale$/,
'empty-module',
false,
/js$/
),
new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading
new webpack.ContextReplacementPlugin(
/\.\/locale$/,
'empty-module',
false,
/js$/
),
new HtmlWebpackPlugin({
inject: true, // Inject all files that are generated by webpack, e.g. bundle.js
templateContent: templateContent(), // eslint-disable-line no-use-before-define
}),
new CircularDependencyPlugin({
exclude: /a\.js|node_modules|components\/Routes/, // exclude node_modules
failOnError: false, // show a warning when there is a circular dependency
}),
];
module.exports = require('./webpack.base.babel')({
mode: 'development',
// Add hot reloading in development
entry: [
'eventsource-polyfill', // Necessary for hot reloading with IE
'webpack-hot-middleware/client?reload=true',
path.join(process.cwd(), 'internals/dev-preamble.js'),
path.join(process.cwd(), 'app/app.js'), // Start with js/app.js
],
// Don't use hashes in dev mode for better performance
output: {
filename: '[name].js',
chunkFilename: '[name].chunk.js',
},
optimization: {
minimize: false,
},
// Add development plugins
plugins: dependencyHandlers().concat(plugins), // eslint-disable-line no-use-before-define
// Tell babel that we want to hot-reload
babelQuery: {
// require.resolve solves the issue of relative presets when dealing with
// locally linked packages. This is an issue with babel and webpack.
// See https://github.com/babel/babel-loader/issues/149 and
// https://github.com/webpack/webpack/issues/1866
presets: ['babel-preset-react-hmre'].map(require.resolve),
},
// Emit a source map for easier debugging
devtool: 'inline-source-map',
performance: {
hints: false,
},
});
/**
* Select which plugins to use to optimize the bundle's handling of
* third party dependencies.
*
* If there is a dllPlugin key on the project's package.json, the
* Webpack DLL Plugin will be used.
*
*/
function dependencyHandlers() {
// Don't do anything during the DLL Build step
if (process.env.BUILDING_DLL) {
return [];
}
// Don't do anything if package.json does not have a dllPlugin property
// Code splitting now included by default in Webpack 4
if (!dllPlugin) {
return [];
}
const dllPath = path.resolve(
process.cwd(),
dllPlugin.path || 'node_modules/react-boilerplate-dlls'
);
/**
* If DLLs aren't explicitly defined, we assume all production dependencies listed in package.json
* Reminder: You need to exclude any server side dependencies by listing them in dllConfig.exclude
*/
if (!dllPlugin.dlls) {
const manifestPath = path.resolve(dllPath, 'reactBoilerplateDeps.json');
if (!fs.existsSync(manifestPath)) {
logger.error(
'The DLL manifest is missing. Please run `npm run build:dll`'
);
process.exit(0);
}
return [
new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: require(manifestPath), // eslint-disable-line global-require
}),
];
}
// If DLLs are explicitly defined, we automatically create a DLLReferencePlugin for each of them.
const dllManifests = Object.keys(dllPlugin.dlls).map(name =>
path.join(dllPath, `/${name}.json`)
);
return dllManifests.map(manifestPath => {
if (!fs.existsSync(path)) {
if (!fs.existsSync(manifestPath)) {
logger.error(
`The following Webpack DLL manifest is missing: ${path.basename(
manifestPath
)}`
);
logger.error(`Expected to find it in ${dllPath}`);
logger.error('Please run: npm run build:dll');
process.exit(0);
}
}
return new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: require(manifestPath), // eslint-disable-line global-require
});
});
}
/**
* We dynamically generate the HTML content in development so that the different
* DLL Javascript files are loaded in script tags and available to our application.
*/
function templateContent() {
const html = fs
.readFileSync(path.resolve(process.cwd(), 'app/index.html'))
.toString();
if (!dllPlugin) {
return html;
}
const doc = cheerio(html);
const body = doc.find('body');
const dllNames = !dllPlugin.dlls
? ['reactBoilerplateDeps']
: Object.keys(dllPlugin.dlls);
dllNames.forEach(dllName =>
body.append(`<script data-dll='true' src='/${dllName}.dll.js'></script>`)
);
return doc.toString();
}
Finally webpack.dll.babel.js:
/**
* WEBPACK DLL GENERATOR
*
* This profile is used to cache webpack's module
* contexts for external library and framework type
* dependencies which will usually not change often enough
* to warrant building them from scratch every time we use
* the webpack process.
*/
const { join } = require('path');
const defaults = require('lodash/defaultsDeep');
const webpack = require('webpack');
const pkg = require(join(process.cwd(), 'package.json'));
const dllPlugin = require('../config').dllPlugin;
if (!pkg.dllPlugin) {
process.exit(0);
}
const dllConfig = defaults(pkg.dllPlugin, dllPlugin.defaults);
const outputPath = join(process.cwd(), dllConfig.path);
module.exports = require('./webpack.base.babel')({
mode: 'development',
context: process.cwd(),
entry: dllConfig.dlls ? dllConfig.dlls : dllPlugin.entry(pkg),
optimization: {
minimize: false,
},
devtool: 'eval',
output: {
filename: '[name].dll.js',
path: outputPath,
library: '[name]',
},
plugins: [
new webpack.DllPlugin({
name: '[name]',
path: join(outputPath, '[name].json'),
}),
],
performance: {
hints: false,
},
});
package.json:
{
"name": "react-boilerplate",
"version": "3.4.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",
"checkversion": "node ./internals/scripts/checkversion.js",
"preinstall": "npm run checkversion",
"postinstall": "npm run build:dll",
"prebuild": "npm run build:clean",
"build": "webpack --config internals/webpack/webpack.prod.babel.js --color --progress",
"build:prod": "cross-env NODE_ENV=production API_V=production npm run build",
"build:staging": "cross-env NODE_ENV=production API_V=staging npm run build",
"build:clean": "npm run test:clean",
"build:dll": "node ./internals/scripts/dependencies.js",
"start": "cross-env NODE_ENV=development node server",
"start:preview": "cross-env NODE_ENV=development CONTENT_PREVIEW=true node server",
"start:tunnel": "cross-env NODE_ENV=development ENABLE_TUNNEL=true node server",
"start:production": "npm run test && npm run build:prod && npm run start:prod",
"start:staging": "npm run test && npm run build:staging && 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:all": "npm run analyze:clean && npm run test:clean && npm run build:clean",
"lint": "npm run lint:js",
"lint:eslint": "eslint",
"lint:js": "npm run lint:eslint -- . ",
"lint:fix": "npm run lint:eslint -- . --fix",
"lint:staged": "lint-staged",
"pretest:coverage": "npm run test:clean",
"test:clean": "rimraf ./coverage",
"test": "cross-env NODE_ENV=test jest",
"test:update": "cross-env NODE_ENV=test jest --updateSnapshot",
"test:coverage": "cross-env NODE_ENV=test jest --coverage",
"test:watch": "cross-env NODE_ENV=test jest --watch",
"coveralls": "cat ./coverage/lcov.info | coveralls",
"flow": "flow; test $? -eq 0 -o $? -eq 2"
},
"lint-staged": {
"*.js": "lint:eslint",
"*.{js,scss}": [
"prettier --write",
"git add"
]
},
"pre-commit": [
"lint:staged",
"test"
],
"dllPlugin": {
"path": "node_modules/react-boilerplate-dlls",
"exclude": [
"chalk",
"compression",
"cross-env",
"express",
"ip",
"minimist"
],
"include": [
"core-js",
"lodash",
"eventsource-polyfill"
]
},
"jest": {
"collectCoverageFrom": [
"app/**/*.{js,jsx}",
"!app/**/*.test.{js,jsx}",
"!app/containers/**/*.{js,jsx}",
"!app/*/RbGenerated*/*.{js,jsx}",
"!app/app.js",
"!app/routes.js"
],
"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$",
"setupFiles": [
"<rootDir>/internals/testing/test-setup.js"
]
},
"dependencies": {
"axios": "^0.15.3",
"babel-polyfill": "6.20.0",
"bluebird": "^3.5.0",
"chalk": "1.1.3",
"classnames": "^2.2.5",
"compression": "1.6.2",
"cross-env": "3.1.3",
"express": "4.14.0",
"fontfaceobserver": "2.0.7",
"history": "4.6.3",
"immutable": "3.8.2",
"ip": "1.1.4",
"leaflet": "^1.0.3",
"lodash": "4.17.2",
"marked": "^0.3.6",
"mime-types": "^2.1.16",
"minimist": "1.2.0",
"moment": "^2.18.1",
"moment-timezone": "^0.5.13",
"numeral": "^2.0.6",
"pace": "0.0.4",
"pace-js": "^1.0.2",
"prerender-node": "^2.7.2",
"qs": "^6.4.0",
"react": "15.4.1",
"react-dom": "15.4.1",
"react-foundation-components": "^0.12.0",
"react-helmet": "5.0.0",
"react-hot-loader": "^4.0.0",
"react-loadable": "^5.3.1",
"react-modal": "^1.7.7",
"react-player": "^1.5.0",
"react-progressbar.js": "^0.2.0",
"react-redux": "4.4.6",
"react-redux-toastr": "^7.0.0",
"react-router": "4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "5.0.0-alpha.6",
"react-router-scroll-memory": "^1.0.1",
"redux": "3.6.0",
"redux-immutable": "3.0.8",
"redux-saga": "0.16.0",
"redux-segment": "^1.6.2",
"request-promise": "^4.2.1",
"shortid": "^2.2.8",
"sitemap": "^1.13.0",
"store": "^2.0.4",
"tls": "0.0.1",
"tunnel-agent": "^0.6.0"
},
"devDependencies": {
"axios-mock-adapter": "^1.8.1",
"babel-cli": "6.18.0",
"babel-core": "6.21.0",
"babel-eslint": "7.1.1",
"babel-loader": "^7.1.4",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-dynamic-import-node": "1.0.0",
"babel-plugin-react-transform": "2.0.2",
"babel-plugin-root-import": "^5.1.0",
"babel-plugin-transform-es2015-modules-commonjs": "6.18.0",
"babel-plugin-transform-react-constant-elements": "6.9.1",
"babel-plugin-transform-react-inline-elements": "6.8.0",
"babel-plugin-transform-react-jsx-source": "^6.22.0",
"babel-plugin-transform-react-remove-prop-types": "0.2.11",
"babel-preset-env": "^1.6.1",
"babel-preset-latest": "6.16.0",
"babel-preset-react": "6.16.0",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-0": "6.16.0",
"cheerio": "0.22.0",
"circular-dependency-plugin": "^5.0.1",
"coveralls": "2.11.15",
"css-loader": "^0.28.11",
"empty-module": "0.0.2",
"enzyme": "2.6.0",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-config-airbnb-base": "^11.1.3",
"eslint-config-prettier": "^2.6.0",
"eslint-import-resolver-webpack": "0.8.3",
"eslint-plugin-flowtype": "^2.30.4",
"eslint-plugin-import": "2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-prettier": "^2.3.1",
"eslint-plugin-react": "7.5.1",
"eslint-plugin-redux-saga": "0.1.5",
"eventsource-polyfill": "0.9.6",
"exports-loader": "^0.7.0",
"file-loader": "^1.1.11",
"flow-bin": "^0.57.3",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"husky": "^0.14.3",
"image-webpack-loader": "^4.2.0",
"imports-loader": "^0.8.0",
"jest": "^22.4.3",
"jest-cli": "^22.4.3",
"lint-staged": "^3.2.1",
"mini-css-extract-plugin": "^0.4.0",
"ngrok": "2.2.4",
"node-plop": "0.5.4",
"node-sass": "^4.5.3",
"null-loader": "0.1.1",
"plop": "1.7.3",
"postcss-loader": "^2.1.3",
"pre-commit": "1.1.3",
"prettier": "^1.7.4",
"react-addons-test-utils": "15.4.1",
"redux-logger": "^2.10.2",
"rimraf": "2.5.4",
"sass-loader": "^6.0.7",
"shelljs": "0.7.5",
"sinon": "2.0.0-pre",
"style-loader": "^0.20.3",
"svg-sprite-loader": "^3.7.3",
"uglifyjs-webpack-plugin": "^1.2.4",
"url-loader": "^1.0.1",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dev-middleware": "^3.1.2",
"webpack-hot-middleware": "^2.22.0",
"webpack-pwa-manifest": "^3.6.2"
}
}

You need to install the plugin that is being asked:
npm install --save-dev babel-plugin-transform-es3-member-expression-literals

new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"',
},
}),
you can try it.

Turns out the issue was to do with macos/windows back slashing and forward slashing differences, switching the exclude pattern to this:
exclude: /(node_modules|bower_components!react-redux-toastr)/
Fixed it.

Categories