Babel-loader: React & Plugin/Preset files are not allowed to export objects, only functions.

[brenwell]

Hello all, first off just a quick thanks for all the hard work.

I have a small issues, perhaps someone can guide me in the right direction if this isn't a bug. (which it likely isn't)

I am trying to build a simple app with Webpack 3.8.1, React 16.1.1, Babel 7.0.0-beta.31 and Babel-loader 8.0.0-beta.0 and I am receiving the following error:

Plugin/Preset files are not allowed to export objects, only functions.

.babelrc

{
    "presets": ["@babel/preset-env","react"]
}

webpack.conf.js

   ...
  module: {
    noParse: [/.*(pixi\.js).*/],
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
        }
      },
     ...

view.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

package.json

  "dependencies": {
    "c-p": "^1.3.5",
    "ismobilejs": "^0.4.1",
    "react": "^16.1.1",
    "react-dom": "^16.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.31",
    "@babel/preset-env": "^7.0.0-beta.31",
    "babel-loader": "^8.0.0-beta.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "colors": "^1.1.2",
    "css-loader": "^0.28.0",
    "es6-promise-promise": "^1.0.0",
    "eslint": "^3.19.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.28.0",
    "imports-loader": "^0.7.1",
    "jsdoc": "^3.4.3",
    "json-loader": "^0.5.4",
    "less": "^2.7.2",
    "less-loader": "^4.0.3",
    "prompt": "^1.0.0",
    "pug": "^2.0.0-rc.4",
    "pug-loader": "^2.3.0",
    "sqlite3": "^3.1.8",
    "stats.js": "^0.17.0",
    "style-loader": "^0.16.1",
    "webpack": "^3.8.1",
    "webpack-notifier": "^1.5.0",
    "xlsx": "^0.11.8"
  }

Any ideas?

[existentialism]

@brenwell you'll want to make sure your presets are also updated to replace your react preset with @babel/preset-react that matches your @babel/core version (7.0.0-beta.31, in your case).

(Sidenote, since you're using preset-env, you can drop the es2015/es2017 presets from your package.json!)

[brenwell]

Awesome, thanks!

npm i @babel/preset-react

{
    "presets": ["@babel/preset-env","@babel/preset-react"]
}

Did the trick!

[existentialism]

@brenwell glad to hear! let us know if you run into any additional issues with the 7.0-betas!

[francisrod01]

@brenwell now the error is React is not defined.

• babel-preset-react-app: ^3.1.2
• babel-core: 6.26.0

"babel": {
    "presets": [
        "react-app"
    ]
},
"eslintconfig: {
    "extends": "react-app"
}

Before change to @babel/preset-react the error it was:

Module build failed (from ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /home/paneladm/projects/website/node_modules/babel-preset-react-app/index.js
    at createDescriptor (/home/paneladm/projects/website/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
    at items.map (/home/paneladm/projects/website/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/home/paneladm/projects/website/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/home/paneladm/projects/website/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at presets (/home/paneladm/projects/website/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
    at mergeChainOpts (/home/paneladm/projects/website/node_modules/@babel/core/lib/config/config-chain.js:315:26)
    at /home/paneladm/projects/website/node_modules/@babel/core/lib/config/config-chain.js:278:7
    at buildRootChain (/home/paneladm/projects/website/node_modules/@babel/core/lib/config/config-chain.js:118:22)
    at loadPrivatePartialConfig (/home/paneladm/projects/website/node_modules/@babel/core/lib/config/partial.js:57:55)
    at Object.loadPartialConfig (/home/paneladm/projects/website/node_modules/@babel/core/lib/config/partial.js:82:18)
    at Object.<anonymous> (/home/paneladm/projects/website/node_modules/next/node_modules/babel-loader/lib/index.js:105:26)
    at Generator.next (<anonymous>)
    at step (/home/paneladm/projects/website/node_modules/next/node_modules/babel-loader/lib/index.js:3:221)
    at _next (/home/paneladm/projects/website/node_modules/next/node_modules/babel-loader/lib/index.js:3:409)
    at <anonymous>

 @ multi ./pages/index.js

After update the dependencies:

• @babel-cli: ^7.1.0
• @babel-core: ^7.1.0
• @babel/preset-react: ^7.0.0
  -

"babel": {
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

And the bug now is:

ReferenceError: React is not defined
    at module.exports../pages/index.js.__webpack_exports__.default (/home/paneladm/projects/website/.next/server/static/development/pages/index.js:106:3)
    at processChild (/home/paneladm/projects/website/node_modules/react-dom/cjs/react-dom-server.node.development.js:2458:14)
    at resolve (/home/paneladm/projects/website/node_modules/react-dom/cjs/react-dom-server.node.development.js:2384:5)
    at ReactDOMServerRenderer.render (/home/paneladm/projects/website/node_modules/react-dom/cjs/react-dom-server.node.development.js:2706:22)
    at ReactDOMServerRenderer.read (/home/paneladm/projects/website/node_modules/react-dom/cjs/react-dom-server.node.development.js:2680:23)
    at renderToString (/home/paneladm/projects/website/node_modules/react-dom/cjs/react-dom-server.node.development.js:3071:25)
    at renderPage (/home/paneladm/projects/website/node_modules/next/dist/server/render.js:321:26)
    at Function.getInitialProps (/home/paneladm/projects/website/node_modules/next/dist/server/document.js:65:25)
    at _callee$ (/home/paneladm/projects/website/node_modules/next/dist/lib/utils.js:135:30)
    at tryCatch (/home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/node_modules/regenerator-runtime/runtime.js:288:22)
    at Generator.prototype.(anonymous function) [as next] (/home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/node_modules/regenerator-runtime/runtime.js:114:21)
    at asyncGeneratorStep (/home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:5:24)
    at _next (/home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:27:9)
    at /home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:34:7
    at new Promise (<anonymous>)
ReferenceError: React is not defined
    at module.exports../pages/index.js.__webpack_exports__.default (/home/paneladm/projects/website/.next/server/static/development/pages/index.js:106:3)
    at processChild (/home/paneladm/projects/website/node_modules/react-dom/cjs/react-dom-server.node.development.js:2458:14)
    at resolve (/home/paneladm/projects/website/node_modules/react-dom/cjs/react-dom-server.node.development.js:2384:5)
    at ReactDOMServerRenderer.render (/home/paneladm/projects/website/node_modules/react-dom/cjs/react-dom-server.node.development.js:2706:22)
    at ReactDOMServerRenderer.read (/home/paneladm/projects/website/node_modules/react-dom/cjs/react-dom-server.node.development.js:2680:23)
    at renderToString (/home/paneladm/projects/website/node_modules/react-dom/cjs/react-dom-server.node.development.js:3071:25)
    at renderPage (/home/paneladm/projects/website/node_modules/next/dist/server/render.js:321:26)
    at Function.getInitialProps (/home/paneladm/projects/website/node_modules/next/dist/server/document.js:65:25)
    at _callee$ (/home/paneladm/projects/website/node_modules/next/dist/lib/utils.js:135:30)
    at tryCatch (/home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/node_modules/regenerator-runtime/runtime.js:288:22)
    at Generator.prototype.(anonymous function) [as next] (/home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/node_modules/regenerator-runtime/runtime.js:114:21)
    at asyncGeneratorStep (/home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:5:24)
    at _next (/home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:27:9)
    at /home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:34:7
    at new Promise (<anonymous>)
page /home/paneladm/projects/website/.next/server/static/development/pages/index.js
page /home/paneladm/projects/website/.next/server/static/development/pages/index.js.map
^Cgot signal SIGINT, exiting

References: https://github.com/zeit/next.js/issues/5301

[victors1681]

Make sure .babelrc is deleted and use babel.config.js

[top-challenger]

I am also having this issue.
Plugin/Preset files are not allowed to export objects, only functions.

.babelrc

{
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    "transform-class-properties"
  ]
}

package.json

"devDependencies": {
        "@babel/core": "^7.2.0",
        "@babel/preset-react": "^7.0.0",
        "axios": "^0.18",
        "babel-eslint": "9.0.0",
        "babel-jest": "23.6.0",
        "babel-loader": "8.0.4",
        "babel-plugin-named-asset-import": "^0.2.2",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-preset-env": "^1.7.0",
        "babel-preset-react": "^6.23.0",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^5.2.0",
        "jquery": "^3.2",
        "laravel-mix": "^3.0.0",
        "lodash": "^4.17.10",
        "quill": "^1.3.6",
        "react": "next",
        "react-dom": "next",
        "react-quill": "^1.3.1",
        "react-router-dom": "^4.3.1"
    },
    "dependencies": {
        "bootstrap": "^4.1.3",
        "font-awesome": "^4.7.0",
        "group-array": "^0.3.3",
        "import": "0.0.6",
        "laravel-echo": "^1.4.0",
        "normalize-scss": "^7.0.1",
        "normalize.css": "^8.0.0",
        "npm": "^6.3.0",
        "prop-types": "^15.6.2",
        "pusher-js": "^4.2.2",
        "react-bootstrap": "^0.32.4",
        "react-bootstrap-table-next": "^1.4.0",
        "react-bootstrap-table2-editor": "^0.2.1",
        "react-bootstrap-table2-paginator": "^1.0.3",
        "react-bootstrap-table2-toolkit": "^1.1.1",
        "react-data-grid": "^4.0.7",
        "react-redux": "^6.0.0",
        "react-select": "^1.3.0",
        "react-select2": "^4.0.3",
        "reactable": "^0.14.1",
        "reactstrap": "^6.5.0",
        "redux": "^4.0.1",
        "redux-form": "^7.4.2",
        "redux-thunk": "^2.3.0",
        "select2": "^4.0.6-rc.1"
    }

I will appreciate any guy's help.

[eduardoinnorway]

Omg, never ending story, same happened to me today.

[dipakchandranp]

For me also happened today! while running some test cases!

Test suite failed to run
Plugin/Preset files are not allowed to export objects, only functions. In home/webapp/node_modules/babel-preset-react/lib/index.js

This is my dependency:

  "devDependencies": {
    "@babel/preset-react": "^7.0.0",
    "babel-jest": "^22.4.3",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "husky": "^0.14.3",
    "jest": "^24.1.0",
    "jest-junit": "^4.0.0",
    "prettier": "1.16.4",
    "pretty-quick": "^1.10.0",
    "react-test-renderer": "^16.3.2",
    "stylelint": "^9.2.1",
    "stylelint-config-standard": "^18.2.0",
    "stylelint-scss": "^3.5.4",
    "webpack-bundle-analyzer": "^2.12.0",
    "webpack-dev-server": "3.1.4"
  },
  "dependencies": {
    "@rails/webpacker": "3.5",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "jquery": "^3.3.1",
    "materialize-css": "^1.0.0-rc.2",
    "pubsub-js": "^1.7.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-redux": "^5.0.7",
    "react-stripe-elements": "^2.0.1",
    "redux": "^4.0.0",
    "webpack-merge": "^4.1.2"
  }

And in .babelrc

"env": {
    "test": {
      "presets": ["react", "env"],
      "plugins": ["transform-class-properties"]
    }
  },

[zeshanshani]

Same thing happened to me again... This config worked for es2015 module last year, but not working this year with perhaps new babel-loader and babel updates:

{
  "presets": [
    [ "es2015", "es2016" ]
  ]
}

Now, I have tried a lot of solutions given here but getting the same error. Very strange.

[andypillip]

@zeshanshani The yearly presets have all been replaced by env, which you can use along with browserslist or the target config to determine your target platforms.

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "chrome": "60"
        }
      }
    ]
  ]
}

[andypillip]

@dipakchandranp If you take a step back, you might notice that babel-core (@babel/core) and babel-preset- major versions are usually aligned.

In your case you have a 7 for core, a 6 for your preset:
"babel-preset-react": "^6.24.1",

Upgrading that preset also to version 7 should do the trick.

Otherwise I'm wondering why you have babel in the devDependencies, but it's presets as hard dependencies. That doesn't make sense to me, they should be both in dev, since together they build your transpiler. You will not need them at runtime.

[jahnaviv]

For me also happened today! while running some test cases!

Test suite failed to run
Plugin/Preset files are not allowed to export objects, only functions. In /home/administrator/Projects/emx-slicer-web-app/node_modules/babel-preset-react/lib/index.js

This is my package.json:
```{
"name": "emx-ad-unit-ui",
"version": "1.0.0",
"description": "EMX Ad Unit UI.",
"author": "Zhen Zheng [e-mail]",
"main": "src/index.ejs",
"scripts": {
"dev": "webpack-dev-server --config webpack.dev.js",
"dist": "npm run build-prod",
"build-dev": "NODE_ENV=development webpack --config webpack.dev.js",
"build-staging": "NODE_ENV=staging webpack --config webpack.prod.js",
"build-prod": "NODE_ENV=production webpack --config webpack.prod.js",
"invalidate": "gulp invalidate",
"upload-index": "gulp upload-index",
"fix-eslint": "eslint \"./src/js/**\" --fix",
"test": "jest --verbose",
"test:watch": "jest --watchAll --verbose",
"test:coverage": "jest --verbose --coverage"
},
"engines": {
"node": "8.9.1",
"npm": "5.2.0"
},
"license": "ISC",
"dependencies": {
"@devexpress/dx-core": "^1.9.0",
"@devexpress/dx-grid-core": "^1.9.0",
"@devexpress/dx-react-core": "^1.9.0",
"@devexpress/dx-react-grid": "^1.9.0",
"@devexpress/dx-react-grid-material-ui": "^1.9.0",
"@material-ui/core": "^3.3.2",
"@material-ui/icons": "^3.0.1",
"@wojtekmaj/react-daterange-picker": "^1.1.1",
"auth0-lock": "^11.11.0",
"axios": "^0.19.0",
"classnames": "^2.2.6",
"deep-equal": "^1.0.1",
"dotenv": "^6.0.0",
"downshift": "^3.1.12",
"es6-promise": "^4.2.4",
"graphql-query-builder": "^1.0.7",
"highcharts": "^6.2.0",
"history": "^4.7.2",
"jwt-decode": "^2.2.0",
"keycode": "^2.2.0",
"lodash": "^4.17.10",
"material-ui": "^0.20.2",
"moment": "^2.22.2",
"moment-timezone": "^0.5.21",
"numeral": "^2.0.6",
"prop-types": "^15.6.2",
"react": "^16.4.2",
"react-cookie": "^2.2.0",
"react-csv": "^1.1.1",
"react-data-export": "^0.5.0",
"react-dates": "^18.3.1",
"react-dom": "^16.4.2",
"react-ga": "^2.4.1",
"react-highcharts": "^16.0.2",
"react-router-dom": "^4.3.1",
"react-select": "2.1.1",
"react-sticky-table": "^2.0.4",
"react-syntax-highlighter": "^9.0.0",
"react-table": "^6.8.6",
"react-url-query": "^1.4.0",
"styled-components": "^3.4.2",
"xlsx": "^0.14.1"
},
"devDependencies": {
"autoprefixer": "^9.1.0",
"aws-sdk": "^2.307.0",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.5.0",
"case-sensitive-paths-webpack-plugin": "^2.1.2",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^1.0.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint": "^5.3.0",
"eslint-config-airbnb": "^17.0.0",
"eslint-import-resolver-webpack": "^0.10.1",
"eslint-loader": "^2.0.0",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.9.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.6",
"gulp": "^3.9.1",
"html-webpack-inline-source-plugin": "0.0.10",
"html-webpack-plugin": "^3.2.0",
"jest": "^24.9.0",
"json-loader": "^0.5.7",
"mini-css-extract-plugin": "^0.4.1",
"node-sass": "^4.5.2",
"optimize-css-assets-webpack-plugin": "^5.0.0",
"postcss-loader": "^2.0.10",
"postcss-smart-import": "^0.7.6",
"precss": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.22.0",
"uglifyjs-webpack-plugin": "^1.1.6",
"url-loader": "^1.0.1",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5",
"webpack-merge": "^4.1.4"
}
}

And in .babelrc:

{
"presets": [
["env", { "modules": false }],
"react"
],
"plugins": [
"transform-object-rest-spread", // experimental feature still
"transform-class-properties"
]
}

[jahnaviv]

Got solution :)
First remove older packages using:
$ npm uninstall babel-core babel-loader babel-preset-env babel-preset-react
Then add new packages using:
$ npm add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

Update .babelrc:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread"
  ]
}