Babel error immediately on eject

Describe the bug

If I start a completely fresh CRA install, and then simply eject it:

• My text editor (VSCode) throws an error on the first line of every JS file.
• Running eslint (by adding a lint script: eslint .) throws the same error for every JS file.

That error is:

Parsing error: [BABEL] /Users/sasha/.../App.js: 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: "/Users/sasha/.../node_modules/babel-preset-react-app/index.js")

Did you try recovering your dependencies?

I did not, because I got this working on a completely fresh install (as an attempt to reproduce the problem on another repo where I’ve tried recovering my dependencies multiple times).

Which terms did you search for in User Guide?

I searched on Google and found this previous issue, as well as several SO posts that didn’t help. The solution proposed in the linked issue has already been applied to CRA, so that doesn’t seem to be the issue.

Environment

$ npx create-react-app --info
npx: installed 67 in 3.055s

Environment Info:

  current version of create-react-app: 5.0.0
  running from /Users/sasha/.npm/_npx/9320/lib/node_modules/create-react-app

  System:
    OS: macOS 12.0.1
    CPU: (10) x64 Apple M1 Pro
  Binaries:
    Node: 14.16.0 - ~/.asdf/installs/nodejs/14.16.0/bin/node
    Yarn: 1.22.10 - ~/.asdf/installs/nodejs/14.16.0/.npm/bin/yarn
    npm: 6.14.11 - ~/.asdf/installs/nodejs/14.16.0/bin/npm
  Browsers:
    Chrome: 98.0.4758.102
    Edge: Not Found
    Firefox: 96.0.2
    Safari: 15.1
  npmPackages:
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

Set up a new app:

npx create-react-app demo
cd demo

Add a lint command to package.json:

   "lint": "eslint ."

Validate that it runs without error:

npm run lint

Validate that the text editor (in my case VSCode) detects no issues with JS files by opening one, and seeing no error tilde at the top of the file:

Then, eject, and watch everything break:

npm run eject
npm run lint # throws many of the above error

Look at a file in VSCode, and it will also show the error tilde at the top of the file. On hover, it shows the aforementioned error:

If I return to the pre-ejected state (get rid of all eject-changes and then npm install), the issues go away.

Expected behavior

An immediately ejected app behaves identically to a non-ejected one. In particular, it doesn’t break Babel parsing and eslint.

[tiny-james]

I found that the error could be stopped by changing the "eslintConfig" section in the package.json to add the NODE_ENV variable:

{
/*... snip ... */
"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "env": {
      "NODE_ENV": "development"
    }
  },
/*... snip ... */
}

So maybe eject needs to do that automatically?

[jacobweber]

@dingziqi Hmm, not sure why it’s working differently for you. I don’t know if this would work, but you could try:

    "presets": [
        ["babel-preset-react-app", false],
        'babel-preset-react-app/prod'
    ]