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

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…

[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!!

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