I have been trying to upgrade my packages and things have started to fall apart and I am now unable to build and cannot seem to figure out what is the issue. I suspect the issue is related to the .babelrc file as it is a babel-loader error being thrown.
.babelrc
{
"presets": [
],
"plugins": [
[
"react-hot-loader/babel",
"transform-object-rest-spread"
],
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-json-strings",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions",
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-logical-assignment-operators",
"@babel/plugin-proposal-optional-chaining",
[
"@babel/plugin-proposal-pipeline-operator",
{
"proposal": "minimal"
}
],
"@babel/plugin-proposal-nullish-coalescing-operator",
"@babel/plugin-proposal-do-expressions",
"@babel/plugin-proposal-function-bind"
],
"env": {
"start": {
"presets": [
]
}
}
}
Stack trace of error when doing npm run build:
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: .plugins[0][1] must be an object, false, or undefined
at assertPluginItem (/var/www/FlaskApp/people-app-prod/static/node_modules/@babel/core/lib/config/validation/option-assertions.js:244:15)
at arr.forEach (/var/www/FlaskApp/people-app-prod/static/node_modules/@babel/core/lib/config/validation/option-assertions.js:222:30)
at Array.forEach (<anonymous>)
at assertPluginList (/var/www/FlaskApp/people-app-prod/static/node_modules/@babel/core/lib/config/validation/option-assertions.js:222:9)
at Object.keys.forEach.key (/var/www/FlaskApp/people-app-prod/static/node_modules/@babel/core/lib/config/validation/options.js:107:5)
at Array.forEach (<anonymous>)
at validateNested (/var/www/FlaskApp/people-app-prod/static/node_modules/@babel/core/lib/config/validation/options.js:83:21)
at validate (/var/www/FlaskApp/people-app-prod/static/node_modules/@babel/core/lib/config/validation/options.js:74:10)
at file (/var/www/FlaskApp/people-app-prod/static/node_modules/@babel/core/lib/config/config-chain.js:174:34)
at cachedFunction (/var/www/FlaskApp/people-app-prod/static/node_modules/@babel/core/lib/config/caching.js:33:19)
at buildRootChain (/var/www/FlaskApp/people-app-prod/static/node_modules/@babel/core/lib/config/config-chain.js:120:36)
at loadPrivatePartialConfig (/var/www/FlaskApp/people-app-prod/static/node_modules/@babel/core/lib/config/partial.js:85:55)
at Object.loadPartialConfig (/var/www/FlaskApp/people-app-prod/static/node_modules/@babel/core/lib/config/partial.js:110:18)
at Object.<anonymous> (/var/www/FlaskApp/people-app-prod/static/node_modules/babel-loader/lib/index.js:144:26)
at Generator.next (<anonymous>)
at asyncGeneratorStep (/var/www/FlaskApp/people-app-prod/static/node_modules/babel-loader/lib/index.js:3:103)
at _next (/var/www/FlaskApp/people-app-prod/static/node_modules/babel-loader/lib/index.js:5:194)
at /var/www/FlaskApp/people-app-prod/static/node_modules/babel-loader/lib/index.js:5:364
at new Promise (<anonymous>)
at Object.<anonymous> (/var/www/FlaskApp/people-app-prod/static/node_modules/babel-loader/lib/index.js:5:97)
at Object._loader (/var/www/FlaskApp/people-app-prod/static/node_modules/babel-loader/lib/index.js:224:18)
at Object.loader (/var/www/FlaskApp/people-app-prod/static/node_modules/babel-loader/lib/index.js:60:18)
at Object.<anonymous> (/var/www/FlaskApp/people-app-prod/static/node_modules/babel-loader/lib/index.js:55:12)
@ multi bootstrap-loader ./src/index ./src main[1]
webpack config:
}, {
test: /\.m?js$/,
use: [{
loader: 'babel-loader',
options:
{
presets: ['@babel/preset-env'],
},
}],
exclude: /node_modules/,
}, {
package.json:
{
"name": "redux-easy-boilerplate",
"version": "1.3.3",
"description": "",
"scripts": {
"clean": "rimraf dist",
"build": "webpack --progress --verbose --colors --display-error-details --config webpack/common.config.js",
"build:production": "npm run clean && npm run build",
"lint": "eslint src",
"start": "node bin/server.js",
"test": "karma start"
},
"repository": {
"type": "git",
"url": ""
},
"keywords": [
"react",
"reactjs",
"boilerplate",
"redux",
"hot",
"reload",
"hmr",
"live",
"edit",
"webpack"
],
"author": "https://github.com/anorudes, https://github.com/keske",
"license": "MIT",
"devDependencies": {
"@babel/core": "7.4.5",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-proposal-do-expressions": "^7.0.0",
"@babel/plugin-proposal-export-default-from": "^7.0.0",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
"@babel/plugin-proposal-function-bind": "^7.0.0",
"@babel/plugin-proposal-function-sent": "^7.0.0",
"@babel/plugin-proposal-json-strings": "^7.0.0",
"@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
"@babel/plugin-proposal-numeric-separator": "^7.0.0",
"@babel/plugin-proposal-optional-chaining": "^7.0.0",
"@babel/plugin-proposal-pipeline-operator": "^7.0.0",
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-syntax-import-meta": "^7.0.0",
"@babel/polyfill": "7.4.4",
"autoprefixer": "9.6.0",
"axios": "0.19.0",
"babel-eslint": "10.0.2",
"babel-loader": "8.0.6",
"babel-plugin-react-transform": "^3.0.0",
"bootstrap": "4.3.1",
"bootstrap-loader": "^3.0.4",
"bootstrap-sass": "3.4.1",
"bootstrap-webpack": "0.0.6",
"classnames": "2.2.6",
"css-loader": "3.0.0",
"csswring": "^7.0.0",
"deep-equal": "^1.0.1",
"eslint": "^6.0.1",
"eslint-config-airbnb": "17.1.0",
"eslint-plugin-import": "2.18.0",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-react": "7.14.2",
"expect": "24.8.0",
"exports-loader": "^0.7.0",
"expose-loader": "^0.7.5",
"express": "4.17.1",
"express-open-in-editor": "^3.1.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^4.0.0",
"gapi": "0.0.3",
"history": "4.9.0",
"http-proxy": "^1.17.0",
"imports-loader": "^0.8.0",
"jasmine-core": "3.4.0",
"jquery": "3.4.1",
"jwt-decode": "^2.2.0",
"karma": "4.1.0",
"karma-chrome-launcher": "^2.2.0",
"karma-mocha": "^1.3.0",
"karma-webpack": "4.0.2",
"less": "3.9.0",
"less-loader": "^5.0.0",
"lodash": "4.17.11",
"material-ui": "^1.0.0-beta.47",
"material-ui-icons": "^1.0.0-beta.36",
"mocha": "^6.1.4",
"morgan": "1.9.1",
"node-sass": "4.12.0",
"npm-install-webpack-plugin": "^4.0.5",
"postcss-import": "^12.0.1",
"postcss-loader": "3.0.0",
"q": "^1.5.1",
"qs": "6.7.0",
"rc-datepicker": "5.0.14",
"react": "16.8.6",
"react-addons-css-transition-group": "^15.6.2",
"react-calendar-component": "^3.0.0",
"react-date-picker": "7.5.1",
"react-datepicker": "2.7.0",
"react-document-meta": "^3.0.0-beta.5",
"react-dom": "16.8.6",
"react-forms": "^2.0.0-beta33",
"react-hot-loader": "4.11.1",
"react-loading-order-with-animation": "^1.0.0",
"react-onclickoutside": "6.8.0",
"react-redux": "7.1.0",
"react-router": "5.0.1",
"react-router-redux": "^4.0.8",
"react-select": "^3.0.4",
"react-tap-event-plugin": "3.0.3",
"react-transform-hmr": "^1.0.4",
"redux": "4.0.1",
"redux-form": "8.2.4",
"redux-logger": "3.0.6",
"redux-thunk": "^2.3.0",
"resolve-url-loader": "3.1.0",
"rimraf": "2.6.3",
"sass-loader": "7.1.0",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "2.1.3",
"url-loader": "2.0.1",
"webpack": "4.35.0",
"webpack-cli": "3.3.5",
"webpack-dev-middleware": "3.7.0",
"webpack-dev-server": "3.7.2",
"webpack-hot-middleware": "2.25.0",
"webpack-merge": "4.2.1",
"yargs": "^13.2.4"
},
"dependencies": {
"@babel/cli": "7.4.4",
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/preset-env": "7.4.5",
"@babel/preset-react": "^7.0.0",
"@material-ui/core": "4.1.3",
"@material-ui/icons": "4.2.1",
"material-ui-pickers": "2.2.4",
"moment": "2.24.0",
"npm-check-updates": "3.1.12",
"papaparse": "5.0.0",
"prop-types": "15.7.2",
"query-string": "6.8.1",
"react-csv": "1.1.1",
"react-dates": "20.2.4",
"react-document-title": "^2.0.3",
"react-handsontable": "0.3.2",
"react-select-fast-filter-options": "^0.2.3",
"react-virtualized-select": "^3.1.3",
"reactstrap": "8.0.0"
}
}
In a .babelrc file, the nested array syntax is used for plugin options:
"plugins": [
[
"plugin-name",
{
// options
}
],
...
]
However, you have included two plugins in a nested array:
"plugins": [
[
"react-hot-loader/babel",
"transform-object-rest-spread"
],
...
]
Change to this:
"plugins": [
"react-hot-loader/babel",
"transform-object-rest-spread",
...
]