Babel-Loader Error Plugin/Preset 文件不允许导出对象，只能导出函数

Question

After updating all my outdated npm packages to @latest , my electron app fails to start, giving the error

ERROR in ./src/index.js [0] Module build failed (from ./node_modules/babel-loader/lib/index.js): [0] Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/nyxynyx/foobar/node_modules/babel-preset-stage-0/lib/index.js

Any idea what went wrong? Thank you everyone!

.babelrc

{
  "presets": ["env", "stage-0", "react"],
  "plugins": [
    "babel-plugin-styled-components",
    "react-hot-loader/babel",
    ["transform-class-properties", { "loose": true }]
  ]
}

package.json (dependencies & devDependencies)

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.21",
    "@fortawesome/free-solid-svg-icons": "^5.10.1",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.2",
    "babel-loader": "^8.0.6",
    "babel-plugin-styled-components": "^1.10.6",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.26.0",
    "bootstrap": "^4.3.1",
    "css-loader": "^3.2.0",
    "electron-log": "^3.0.7",
    "electron-updater": "^4.1.2",
    "file-loader": "^4.2.0",
    "firebase": "^6.3.4",
    "fix-path": "^2.1.0",
    "json-loader": "^0.5.7",
    "lodash": "^4.17.15",
    "menubar": "^6.0.7",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-redux": "^7.1.0",
    "react-redux-firebase": "^2.3.0",
    "reactstrap": "^8.0.1",
    "redux": "^4.0.4",
    "redux-thunk": "^2.3.0",
    "style-loader": "^1.0.0",
    "styled-components": "^4.3.2",
    "typeface-open-sans": "0.0.75",
    "url-loader": "^2.1.0"
  },
"devDependencies": {
    "concurrently": "^4.1.1",
    "devtron": "^1.4.0",
    "electron": "^6.0.1",
    "electron-builder": "^21.2.0",
    "electron-debug": "^3.0.1",
    "electron-devtools-installer": "^2.2.4",
    "eslint": "^6.1.0",
    "eslint-config-airbnb": "^17.1.1",
    "eslint-import-resolver-webpack": "^0.11.1",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.14.3",
    "express": "^4.17.1",
    "react-dom": "^16.8.6",
    "react-hot-loader": "^4.12.10",
    "react-router": "^5.0.1",
    "react-router-dom": "^5.0.1",
    "stylelint": "^10.1.0",
    "stylelint-config-standard": "^18.3.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.39.1",
    "webpack-dev-middleware": "^3.7.0",
    "webpack-hot-middleware": "^2.25.0",
    "webpack-merge": "^4.2.1"
  },

Using node v12.6.0 on Mac OS X Mojave 10.14.5

Answer 1

I am moving my answer from comment due to lack of space there :)

Try using new packages for babel-core, babel-register and presets, replacing the old ones since they are depricated (babel-core, babel-presets-env, etc):

@babel/core - https://www.npmjs.com/package/@babel/core ,

@babel/presets-env - https://babeljs.io/docs/en/babel-preset-env ,

@babel/presets-react - https://babeljs.io/docs/en/babel-preset-react ,

@babel/presets-stage-0 https://babeljs.io/docs/en/babel-preset-stage-0 ,

@babel/polyfill - https://babeljs.io/docs/en/babel-polyfill and

@babel/register - https://babeljs.io/docs/en/babel-register .

Then try deleting package.lock, and running again npm i . If that is not helping you can also try deleting node_modules folder, and running npm i again

Answer 2

That is due to outdated babel packages being used. The babel project, just like most other active Javascript projects, have moved on to using scope packages. Hence, the package names starts with @babel

Check this to fix issue

Answer 3

babel-preset-env / babel-preset-react packages are deprecated. use @babel/preset-env and @babel/preset-react packages.

And do the following change in .babelrc :

"presets": ["@babel/env", "@babel/react"]