Create-react-app: missing @babel/plugin-transform-react-jsx-self after run eject

[zWingz]

Is this a bug report?

bug

Did you try recovering your dependencies?

i run yarn add @babel/plugin-transform-react-jsx-self -D and fixed it

Environment

version 2.1.8

Steps to Reproduce

(Write your steps here:)

1. create-react-app test-rc --typescript
2. yarn eject
3. yarn start

Expected Behavior

no error

Actual Behavior

[tanzhiling]

So do I，How to solve it?

[heyimalex]

Thanks! I was able to repro with the commands given. I'm taking a look at it now.

npx create-react-app issue_6679 --typescript
cd issue_6679
yarn run eject
yarn run start

[iansu]

This seems to be an intermittent issue. We see this every once in a while on CI and then it disappears. I was trying to reproduce it locally last week without success. If anyone can reproduce it consistently that would be a great first step.

[abel1105]

Running to the same problem here.
After struggling with the whole afternoon, I came out with something that may be useful?

1. It seems to only happen on Yarn, not with NPM.
   
   
   
   • npx create-react-app my-app --use-npm works great after eject.
   
   
2. After npm pack and test it with the react-script.tgz file, everything works great on my local create-react-app env.
3. I try to figure out what happens inside node_modules, so I follow #6099 instruction about delete whole node_module and reinstall with yarn again. The image below is the compare directory result between the reinstall one(left) and the broken one(right), and the only different is inside the node_modules > babel-preset-react-app > node_modules > @babel.

It seems like after running npx create-react-app my-app, the node_modules has babel-preset-react-app inside, and when running yarn eject, although react-script removed from package.json and babel-preset-react-app replaced it, Yarn didn't resolve babel-preset-react-app again.

I try to fix the broken one with yarn remove babel-preset-react-app and yarn add babel-preset-react-app and it works. Maybe can add some script to clean up the babel-preset-react-app before or after yarn install, and it will be fixed.

https://github.com/facebook/create-react-app/blob/e630238d0d5870aa0f20e487b12708935cf58737/packages/react-scripts/scripts/eject.js#L309-L312

[heyimalex]

@abel1105 Really good detective work! Thank you so much.

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/

Not sure what the fix is, or even how to search for this issue in the yarn issue tracker. But at least we have a handle on why it's happening.

[heyimalex]

Closing in favor of #6099