create-react-app: Error: Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV`

Can you reproduce the problem with latest npm?

yes

Can you still reproduce it?

yes

Description

When creating a new react app with create-react-app without doing anything, only running yarn start gives the following error :

Failed to compile.
./src/index.js
Module build failed: Error: Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received: "undefined".
 (While processing preset: "/Users/nboisvert/Git/memberzone/node_modules/babel-preset-react-app/index.js")
    at Array.map (native)

Expected behavior

Run the template React app

Actual behavior

Displays :

Environment

Run these commands in the project folder and fill in their results:

npm ls react-scripts (if you haven’t ejected):

memberzone@0.1.0 /Users/nboisvert/Git/memberzone
└── react-scripts@1.0.6

node -v: v6.2.1
npm -v: 4.6.1

Then, specify:

Operating system: macOS Sierrra 10.12.5
Browser and version: Google Chrome Version 58.0.3029.110 (64-bit)

Reproducible Demo

Didn’t add anything. Fresh install

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 18 (9 by maintainers)

Most upvoted comments

to fix this you need to do that : create a .babelrc file and then add this following code in it.

{
  "presets": [
    "react",
    "es2015",
    "stage-2"
  ]
}

i am using es2015 and stage-2 and for your : scripts : start.js add this :

process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';

you can create a development , test, build one. my advice to you and i found that it is good to understand what is happening is to eject the react project.

heshamelmasry77 on Nov 23, 2017

Please try react-scripts@1.0.7 (or create a new project). Should hopefully fix the issue.

https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.7

gaearon on May 27, 2017

Manage to resolve it by adding it to the .zshrc file, I’ve never had this before. I added the following :

export NODE_ENV=development
export BABEL_ENV=$NODE_ENV

And it works as expected, hope it could helps others!

Note from maintainers: this is not a good fix because it will build your production projects in development mode. Don’t do it! Instead subscribe to this issue and provide more details about your system if you experience this.

nicklayb on May 27, 2017

Can you please remove the hack, verify it still fails on npm start, and then add this line to node_modules/react-scripts/scripts/start.js:

// ...
process.on('unhandledRejection', err => {
  throw err;
});

process.env.NODE_ENV = 'development';
+process.env.BABEL_ENV = 'development';

at about line 20, and try npm start again?

gaearon on May 27, 2017

What’s the fix for a non-CRA app that uses babel-preset-react-app?

Already tried adding to plugins: [ new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }) to no avail.

Update: My workaround was to simply switch to babel-preset-react config.

English3000 on May 13, 2018

Adding “+process.env.BABEL_ENV = ‘development’;” worked for me too 😃

Ethan-liao on Aug 17, 2017

Hmm this doesn’t sound right at all. You shouldn’t need to set anything, and in fact setting them like this can create later issues.

gaearon on May 26, 2017