missing @babel/plugin-transform-react-jsx-self after run eject
Closed this issue · 6 comments
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:)
create-react-app test-rc --typescript
- yarn eject
- yarn start
Expected Behavior
no error
Actual Behavior
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
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.
Running to the same problem here.
After struggling with the whole afternoon, I came out with something that may be useful?
- It seems to only happen on Yarn, not with NPM.
npx create-react-app my-app --use-npm
works great after eject.
- After
npm pack
and test it with the react-script.tgz file, everything works great on my local create-react-app env. - 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.
create-react-app/packages/react-scripts/scripts/eject.js
Lines 309 to 312 in e630238
@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.