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 🙉

[kenbankspeng]

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'
          ]
      }
    }
  },

[draculapile]

Hi, I have met the same bug, and here are my steps to try to figure out this.

npx create-react-app my-app
cd my-app
npm run eject

Then, I created a launch.json in VSCode to debug:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug CRA ESLint",
      "type": "node",
      "request": "launch",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/node_modules/eslint/bin/eslint.js",
      "args": [
        "--debug",
        "--ext",
        ".js",
        "${workspaceFolder}/src"
      ],
      "cwd": "${workspaceRoot}",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

And, set a breakpoint in node_modules/babel-preset-react-app/create.js :

Pressed F5 and I got this:

So in my opinion, here is the reason:

once you run eject , CRA sets the eslintConfig and the babel fields in the package.json :

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

ESLint will extend rules from create-react-app/packages/eslint-config-react-app , we can see it uses @babel/ellint-parser as parser:

// eslint-config-react-app/base.js
parserOptions: {
  sourceType: 'module',
  requireConfigFile: false,
  babelOptions: {
    presets: [require.resolve('babel-preset-react-app/prod')],
  },
},

therefore, when the breakpoint is executed to node_modules/@babel/core/lib/config/config-chain.js , there are two presets here:

one is from the "babel" field in the package.json file, and the other is from the babelOptions above

in the babel-preset-react-app/index.js, when the algorithm got here, env is undefined:

I think that's why we got the Error here. Besides, CRA always set env when we run start build and test, like this:

Also, you can reproduce this Error through a simple package.json file like this:

"devDependencies": {
  "@babel/core": "^7.18.2",
  "babel-preset-react-app": "^10.0.1",
  "eslint": "^8.17.0",
  "eslint-config-react-app": "^7.0.1"
},
"eslintConfig": {
  "extends": [
    "react-app"
  ]
},
"babel": {
  "presets": [
    "react-app"
  ]
}

As all of above, considering when we run the eject command, we tend to get a customized configuration(include env), it seems to be a good choice to set a default env in the babel-preset-react-app/index.js.

So I have opened a pull request #12467, and, is there a better way? : ) : ) : ) : ) : ) : )

[cat-kun]

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

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

[lushdog]

Add .eslintrc.js file and remove eslintConfig in package.json .

const NODE_ENV = process.env.NODE_ENV

module.exports = {
  extends: ['react-app'],
  rules: {},
  env: {
    NODE_ENV
  }
}

[scalybur]

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?

Works after ejection

[h2oearth]

It seems like the bug is still open :-/. I can bypass this issue by setting export NODE_ENV="development" in the console before opening VS Code. Waiting for a better option!

[ArpanSolanki29]

The following hack worked for me:

In the node_modules/babel-preset-react-app/index.js replace line 18 with ==> const env = "development";

Restart the ESLint Server. (Do Ctrl+Shift+P and type "Restart ESLint Server").

[chengchaoyue]

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

can solve problems

[byte-eth]

@dingziqi嗯，不确定为什么它对你来说工作方式不同。我不知道这是否会起作用，但你可以尝试：

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

it's work well！thank you very much~