Babel error immediately on eject

[sashafklein]

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]

@tiny-james If I do that, I just get an error from eslint, "Environment key "NODE_ENV" is unknown". I think it may just be stopping eslint from working.

The underlying issue seems to be that, although eslint-config-react-app specifies:

    babelOptions: {
      presets: [require.resolve('babel-preset-react-app/prod')],
    },

and that file does get loaded, its default export is never called when running eslint. Instead, babel-preset-react-app/index's default export is called.

It looks like the babel presets in package.json cause babel-preset-react-app/index to be used instead. Eslint works if I delete this from package.json:

  "babel": {
    "presets": [
      "react-app"
    ]
  }

but that will probably mess with normal Babel compilation outside of eslint.

Not sure what the solution is.

[jacobweber]

OK, here's a hack that seems to work:

Update package.json to look like this:

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "parserOptions": {
      "babelOptions": {
        "presets": [
          ["babel-preset-react-app", false]
        ]
      }
    }
  },

This disables the "index" plugin when running eslint, so the "prod" one can be loaded.

[dingziqi]

OK, here's a hack that seems to work:

Update package.json to look like this:

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "parserOptions": {
      "babelOptions": {
        "presets": [
          ["babel-preset-react-app", false]
        ]
      }
    }
  },

This disables the "index" plugin when running eslint, so the "prod" one can be loaded.

In my case, a new Error will be throwed：Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript".

[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'
    ]

[lucasnogdias]

OK, here's a hack that seems to work:

Update package.json to look like this:

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "parserOptions": {
      "babelOptions": {
        "presets": [
          ["babel-preset-react-app", false]
        ]
      }
    }
  },

This disables the "index" plugin when running eslint, so the "prod" one can be loaded.

This worked for me, thank you! :)

[MuLoo]

add
"parserOptions": { "babelOptions": { "presets": [ ["babel-preset-react-app", false] ] } }
to your eslintrc.js or package.json and still not work ?
maybe you should try restart your vscode 🙉

[kenbanks-peng]

Hoping this is fixed in the eject process. Strangely but not unexpectedly, this enhanced hack does not work for me, so eslint gives me the error for every file it assesses in my project :(

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "parserOptions": {
      "babelOptions": {
          "presets": [
             ["babel-preset-react-app", false],
             'babel-preset-react-app/prod'
          ]
      }
    }
  },