Getting "Error: Plugin/Preset files are not allowed to export objects, only functions." from 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.

If this is on a clean create-react-app install, then this is something to raise over on github.com/facebook/create-react-app/issues. That would also probably be the first place to ask, rather than SO, since that's where the people who make create-react-app will be looking for questions/bug reports. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Sep 27, 2018 at 4:32
@Mike'Pomax'Kamermans thank you for that suggestion. I did just that and was able to get my issue resolved. Will post an answer here on SO with the link to the issue thread I started on GitHub with them. Some good nuggets of information was revealed in my conversation with two of the contributors. — danchez
– danchez, Commented Sep 27, 2018 at 15:43
Sidenote- your react and react-dom versions should always match. — Ryan Walker
– Ryan Walker, Commented Oct 22, 2019 at 0:13

danchez · Accepted Answer · 2018-09-29 18:19:14Z

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.

edited Sep 29, 2018 at 18:19

answered Sep 27, 2018 at 15:47

danchez

1,4864 gold badges18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pritam Sadhukhan Over a year ago

I am facing a similar issue; but I cant delete babel as I have to execute tests written on jest and enzyme. Do you have any such scenario?

danchez Over a year ago

@PritamSadhukhan If your app was bootstrapped using Create React App, then you do not need explicitly declare Babel as a dependency or devDependency. It is built into CRA. You should be able to remove your manually installed Babel dependencies without there being an issue running your tests via react-scripts test --env=jsdom. If you ejected, however, then you are managing all your dependencies manually and Babel will need to be explicitly declared. Which situation are you in?

Ajay Poshak · Accepted Answer · 2018-09-27 15:06:48Z

0

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;

answered Sep 27, 2018 at 15:06

Ajay Poshak

7266 silver badges14 bronze badges

2 Comments

danchez Over a year ago

Turns out when using create-react-app all .babelrc and babel.config.js files are ignored. This wouldn't work unfortunately unless say you decided to eject from Create React App. That would be a different story all together though.

Lazar Nikolic Over a year ago

Where should you call this function then?

Collectives™ on Stack Overflow

Getting "Error: Plugin/Preset files are not allowed to export objects, only functions." from babel-preset-react-app/index.js

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related