出现“错误：插件/预设文件不允许导出对象，只能导出功能。” 来自 babel-preset-react-app/index.js

Question

So I have a project that was bootstrapped with create-react-app and when trying to build with react-scripts build , I receive the following error output:

Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.

According to the output, the error is coming from node_modules/babel-preset-react-app/index.js which looks like the following:

'use strict';

const create = require('./create');
var env = process.env.BABEL_ENV || process.env.NODE_ENV;

module.exports = create(env);

I am using Babel 7 and below is a list of the relevant dependency packages from package.json :

"dependencies": {
    ...
    "react": "^16.5.2",
    "react-dom": "^16.4.0",
    "react-loadable": "^5.4.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.5"
},
"devDependencies": {
    "@babel/cli": "^7.1.0",
    "@babel/core": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^9.0.0"
    ...
}

My babel.config.js is the following:

module.exports({
 presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow']
})

I have done as much digging through the internet as I could to try and resolve this problem. Ended up finding many similar posts to this but, none of the suggested solutions worked out for me. I saw one or two that mentioned including the @babel/preset-env and @babel/preset-react presets in babel.config.js which I already have. Hoping the community has some insight to share.

Answer 1

I posted an issue thread on GitHub around this problem and was able to get it resolved by working with two of the Create React App contributors. Some great subtle points were brought to attention with respect to how Babel works when using Create React App. I definitely recommend giving the conversation a read for those of you suffering from the same problem I did here.

https://github.com/facebook/create-react-app/issues/5135

There is one thing I will emphasize for those of you using Create React App: Delete all babel related devDependencies and reinstall your node_modules . Create React App does NOT care or look for .babelrc or babel.config.js files in your module. They are useless (at least currently, because only time will tell if this behavior is subject to change). If that doesn't work, then additionally delete your package-lock.json file along with your node_modules and try again.

The only babel devDepdendency that I kept in my package (which most likely did not contribute to my problem) was babel-eslint since I'm using ESLint in my project.

Answer 2

From Babel7 onwards, they expect config to be returned from a function. Its better for caching.

Now to solve your issue, try this

function loadConfig() {
  return {
    presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow']
  }
}
module.exports = loadConfig;