Running 'react-scripts build' generates Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In ../node_modules/babel-preset-react-app/index.js at Array.map (<anonymous>)

[thedanchez]

Is this a bug report?

No. (At least not yet I believe)

Description

So I have a project that was bootstrapped with create-react-app. After the passing of time and many commits later, I ended up doing a refactoring that involved restructuring the bootstrapped app. I introduced two more local npm (three including the root folder) modules such that my project folder structure ended up looking like the following:

-- root project folder (also an npm package)
    -- local npm module1
    -- local npm module2
    -- create-react-app module

Ever since I did this restructure, running react-scripts build produces the following error output:

Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions. ... at Array.map(<anonymous>)

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.

Environment

Environment:
OS: macOS High Sierra 10.13.6
Node: 8.12.0
Yarn: Not Found
npm: 6.4.1
Watchman: Not Found
Xcode: Not Found
Android Studio: Not Found

Packages: (wanted => installed)
react: ^16.5.2 => 16.5.2
react-dom: ^16.4.0 => 16.5.2
react-scripts: 1.1.5 => 1.1.5

Expected Behavior

'react-scripts build' should build the app with no issues.

Actual Behavior

'react-scripts build' fails.

Reproducible Demo

None yet..

[Timer]

How are you using babel.config.js and react-scripts? These two things are incompatible.

Can you provide a small reproducible demo?

[thedanchez]

To add more context, I actually had a .babelrc file before and it was generating the same error output. I only renamed the file to babel.config.js (since Babel 7 supports this now to my understanding) in an attempt to find a solution. Just renamed it back again to .babelrc with no change in outcome.

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

I'm going to try and create a project that reproduces the problem. Hopefully I can get it to you within the hour..

[gaearon]

Create React App doesn’t support configuring Babel in the first place. So it doesn’t matter what you call the file — it is intentionally ignored.

Yeah we’d need a demo to tell more. Thanks.

[thedanchez]

That detail of not supporting Babel configs in create-react-app is a great nugget of information that I completely missed. Thanks for that! In progress on working on a reproducible project.

[thedanchez]

@gaearon @Timer -- Here is the link to a repo I made that should reproduce the problem.

https://github.com/dsanc89/react-scripts-build-issue

Hope it gets recreated successfully on your machines too.

[gaearon]

@dsanc89 Why did you add dependencies like @babel/core, @babel/preset-env, babel-core, etc, to your project? This is a sure way to break Create React App. Did you follow some tutorial? Do you remember which one?

We need to verify 2.x would refuse to build and show a proper error message.

[thedanchez]

@gaearon This was an existing project that I inherited so it's hard for me to answer that unfortunately :(

It's great to know that including @babel dependencies would break Create React App. Not sure if you guys have it, but is there a place in the current documentation that you explicitly state that? If you have it, then I totally missed it. Sorry about that. But if not, that would be a great piece of info to emphasize for those of us who are unaware.

If I were to remove those @babel related packages, would I be able to get the project back into a stable state? Or is this a situation of the damage already being done and irreversible?

[gaearon]

Not sure if you guys have it, but is there a place in the current documentation that you explicitly state that? If you have it, then I totally missed it. Sorry about that. But if not, that would be a great piece of info to emphasize for those of us who are unaware.

👍

I think 2.x should actually fail with a useful message when this happens. We need to verify this.

If I were to remove those @babel related packages, would I be able to get the project back into a stable state? Or is this a situation of the damage already being done and irreversible?

Totally, that should help. Remove them from both top-level folder package.json and the one inside. Make sure to delete node_modules and reinstall after that.

If it doesn't help then let us know what's broken.

[thedanchez]

YESSS!! It works!!! You guys are the best!

In my case, I only had to remove all babel-related devDependencies (except for babel-eslint) from the module that used Create React App. I actually didn't have to modify the top-level root package to get it to work. Although, I additionally had to delete my package-lock.json along with node_modules in the Create React App module in order for react-scripts build to run successfully. Everything is in working order now.

Thank you guys so much for your time on this!!