Build fails after eject: Cannot find module '@babel/plugin-transform-react-jsx'

[lixiaoyan]

Is this a bug report?

Yes

Environment

Environment Info:

  System:
    OS: Linux 4.18 Fedora 29 (Workstation Edition) 29 (Workstation Edition)
    CPU: x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
  Binaries:
    Node: 10.13.0 - /usr/bin/node
    Yarn: 1.12.3 - ~/.npm-packages/bin/yarn
    npm: 6.4.1 - /usr/bin/npm
  Browsers:
    Chrome: 70.0.3538.102
    Firefox: 63.0.1
  npmPackages:
    react: ^16.7.0 => 16.7.0 
    react-dom: ^16.7.0 => 16.7.0 
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

Steps to Reproduce

1. npx create-react-app project
2. cd project
3. yarn eject
4. yarn build

Expected Behavior

Build success.

Actual Behavior

Build fails.

Creating an optimized production build...
Failed to compile.

./src/index.js
Error: [BABEL] /tmp/project/src/index.js: Cannot find module '@babel/plugin-transform-react-jsx' (While processing: "/tmp/project/node_modules/babel-preset-react-app/index.js$1")
    at Array.reduce (<anonymous>)

After eject, there's no @babel/plugin-transform-react-jsx module inside ./node_modules, ./node_modules/babel-preset-react-app/node_modules or ./node_modules/babel-preset-react-app/node_modules/@babel/preset-react/node_modules.

I need to delete the whole node_modules and re-run yarn to make it work.

[Timer]

I think this is expected. You need to re-run yarn after ejecting.

[lixiaoyan]

@Timer No, re-run yarn doesn't help. I need to delete the whole node_modules and re-install all packages. I think it might be a bug in yarn package manager but I'm not sure.

[shreeramk]

I am facing the same issue as well.

[CiaranReen]

Fresh install this morning, seeing the same behaviour outlined above.

[mattesja]

For me that workaround at SO helped. https://stackoverflow.com/questions/53327625/cannot-find-module-babel-plugin-transform-react-jsx-source-when-running-react

Nevertheless a real fix would be nice :-)

[ianschmitz]

@Timer this looks similar to the issue we're seeing that is causing our Travis builds to fail.

https://travis-ci.org/facebook/create-react-app/builds/475444651

[feugy]

See this

CRA does not include this dependency when ejecting.
You'll have to add it yourself (yarn add @babel/plugin-transform-react-jsx or npm install --save @babel/plugin-transform-react-jsx)

A proper fix in CRA will be better of course.

[hwj0623]

See this

CRA does not include this dependency when ejecting.
You'll have to add it yourself (yarn add @babel/plugin-transform-react-jsx or npm install --save @babel/plugin-transform-react-jsx)

A proper fix in CRA will be better of course.

I Fixed this ejecting issue by adding @babel/plugin-transform-react-jsx. thx :)

[liiiku]

once yarn eject has been operated, @babel/plugin-transform-react-jsx,@babel/plugin-transform-react-jsx-self and @babel/plugin-transform-react-jsx-source are deleted

[Reinmar]

I've just stumbled upon this too. My ejected setup missed two dependencies. Calling the below helped:

yarn add @babel/plugin-transform-react-jsx @babel/plugin-transform-react-jsx-self

[iansu]

We sometimes see this error in CI and sometimes we don't. I've also tried unsuccessfully to reproduce it locally with a freshly created project.

[mjraadi]

I'm having the same issue. @LinkChenzy suggestion worked for me.

[sidalidev]

@lixiaoyan Yep, rm -rf node_modules && yarn worked fine for me 👌

[heyimalex]

Me and @abel1105 did some debugging work over in #6679, but I want to move the conversation here.

I don't have a solution, but I can consistently reproduce this. Roughly here's what's up:

node_modules after npx create-react-app issue_6679 --typescript.

@babel/plugin-transform-react-jsx-self/
@babel/preset-react/
babel-preset-react-app/
babel-preset-react-app/node_modules/@babel/preset-react/

node_modules after yarn run eject. Here's where we're getting the error. If you run yarn why @babel/plugin-transform-react-jsx-self it will tell you that it's installed because @babel/preset-react depends on it. However, that package isn't resolvable from the nested @babel/preset-react in babel-preset-react-app/node_modules just because of how module resolution works.

- @babel/plugin-transform-react-jsx-self/
@babel/preset-react/
+ @babel/preset-react/node_modules/@babel/plugin-transform-react-jsx-self/
babel-preset-react-app/
babel-preset-react-app/node_modules/@babel/preset-react/

node_modules after rm -rf node_modules && rm yarn.lock && yarn. Everything works again.

@babel/preset-react/
@babel/preset-react/node_modules/@babel/plugin-transform-react-jsx-self/
babel-preset-react-app/
- babel-preset-react-app/node_modules/@babel/preset-react/

[iansu]

Good work investigating this. So is this a bug in yarn or something in Create React App? What happens if you create an app with npm and then eject?

[heyimalex]

Yeah, it doesn't repro when I --use-npm, so I think it's a bug in yarn. I was using 1.12.3 but just reproduced using the latest version, 1.15.2. It's weird that it's intermittent for you because I can repro every time on my machine.

[iansu]

Let's file an issue with Yarn then. Or see if one already exists.

[iansu]

@arcanis do you have any idea what might be going on here? I was going to file an issue with Yarn but I'm not even sure how to describe this problem succinctly.

[Pajn]

I think I'm hitting the same yarn bug in a project derived from CRA but I get it with different babel packages depending on the test case.

Just as here, running npm or removing node_modules and rerunning yarn fixes the problem. It seems like yarn does not correctly verify the existing package tree somehow.

[Pajn]

My current understanding is that yarn does not completely verify the package tree when running yarn for existing dependencies. Combined with the very special case of removing a dependency while at the same time installing its dependencies as first hand dependencies makes it possible for some previously transitive dependence to not get flattened and therefor be impossible to reach from packages that have been flattened (as previously discovered by @heyimalex and @abel1105).

I don't know if yarn skips this verification purposly for performance reasons or if it's a bug. But as this case should be incredibly uncommon it might be reasonable to skip it by default. However none of the yarn flags that I expected to help (--force and --check-files) does help. What I would want from yarn, I think, is a flag that verifies if all packages is placed at exactly the same nesting level as it would place them at if there were no node_modules folder.

[arcanis]

@arcanis do you have any idea what might be going on here? I was going to file an issue with Yarn but I'm not even sure how to describe this problem succinctly.

No idea, sorry. It's clear it shouldn't do this, though 😕

Efficient node_modules diffing is pretty hard, and part of the reason why I don't invest too much bandwidth in node_modules at the moment. Unless someone sends a PR for the v1, this bug will likely be fixed as part of the v2 rearchitecture work, which will make PnP the default install strategy.

[iansu]

I'm not sure what the timeline is for v2 but I don't think this is a critical issue so we can probably wait. If someone wants to send a PR for v1 that would be great but it probably won't be me. I am curious to try this out with Yarn v2 though and see if it works.

[d4niells]

@lixiaoyan Sim, rm -rf node_modules && yarnfuncionou bem para mim👌

thanks, it worked for me too

[mrobayo]

thanks with this line yarn add @babel/plugin-transform-react-jsx @babel/plugin-transform-react-jsx-self works for me.

[cjimmy]

Upgrading babel core worked for me: yarn add @babel/core

[micahstubbs]

a more tightly scoped workaround, inspired by the rm -rf node_modules comments:

# delete the files on disk for the package with the problematic transitive dependency
rm -rf node_modules/babel-preset-react-app

# delete the lock file to force yarn to check all the first-level deps on disk
rm yarn.lock

# install again
yarn

This approach is somewhat faster, since we don't need to delete all of our node_modules on disk, just the node_modules/babel-preset-react-app directory 💡

[laoshaw]

yarn add @babel/plugin-transform-react-jsx @babel/plugin-transform-react-jsx-self is an quicker fix for me, no need rm -rf node_modules etc

[alex067]

I've tried all the solutions posted above, but still having the issue:

Add @babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of your Babel config to enable transformation.

I've installed

    "@babel/plugin-transform-react-jsx": "^7.10.4",
    "@babel/plugin-transform-react-jsx-self": "^7.10.4"

Tried numerous times to remove node_modules & reinstall. I've tried to add require.resolve('@babel/plugin-transform-react-jsx') in my webpack.config.js, and tried to add the plugin directly to the babelrc plugin section.

Does anyone have any other solution?

My current babel config in package.json:

 "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-transform-react-jsx"
    ]
  },

[mmesba]

I've just stumbled upon this too. My ejected setup missed two dependencies. Calling the below helped:

yarn add @babel/plugin-transform-react-jsx @babel/plugin-transform-react-jsx-self

thanks, dude...

[rosedo]

For me the error was in VS Code only, so I had to add "eslint.workingDirectories": ["App", "web"] in the workspace settings. This is because the workspace had two projects in it, with two different eslint and package.json configurations.

Seems not necessary when adding"eslintConfig": {"extends": ["react-app"]} in a project using react-scripts, however using DISABLE_ESLINT_PLUGIN=true react-scripts build may be required to not break the build.