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

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

  ...

]