Plugins[0][1] must be an object, false, or undefined

node.js npm webpack babeljs babel-loader
ComputerLocus picture ComputerLocus · Jun 26, 2019 · Viewed 13.3k times · Source

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

Answer

Steve Holgado picture Steve Holgado · Jun 27, 2019

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

  ...

]

Related questions

Cannot find module '@babel/core'

I am following along with this webpack4/react tutorial: https://www.youtube.com/watch?v=deyxI-6C2u4 I have followed it exactly up until the part where he runs npm start. The difference is, his app runs, and mine …

Read More
How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?

I am new to the whole nodejs/reactjs world so apologies if my question sounds silly. So I am playing around with reactabular.js. Whenever I do a npm start it always runs on localhost:8080. How do I change it …

Read More
Webpack how to build production code and how to use it

I am very new to webpack, I found that in production build we can able to reduce the size of overall code. Currently webpack builds around 8MB files and main.js around 5MB. How to reduce the size of code …

Read More