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.
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.