You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
With Yarn 2 PnP enabled, new JSX support is not detected due to the fact that Yarn does not allow indirect dependencies to be required. react-scripts does not list react in dependencies.
Currently default for pnpFallbackMode is dependencies-only for regular projects, but for workspaces it is forced to none
Remove bits not used in workspace install rm -rf packages/test-cra/{.pnp.js,.yarn,yarn.lock}
Install dependencies yarn up
Yarn needs those as direct dependencies: yarn workspace test-cra add eslint-config-react-app react-refresh
Confirm it works: yarn workspace test-cra start
Remove import React from 'react'; from src/App.tsx
Confirm it breaks: yarn workspace test-cra start
Failed to compile.
src/App.tsx
Line 6:5: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 7:7: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 8:9: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 9:9: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 10:16: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 12:9: 'React' must be in scope when using JSX react/react-in-jsx-scope
Search for the keywords to learn more about each error.
Add react as dependency of react-scripts via packageExtensions:
yarn config set packageExtensions --json '{"react-scripts@*": {"peerDependencies": {"react": "*"}}}'
Install dependencies with updated extensions yarn
Verify it works again yarn workspace test-cra start
For regular install:
Create test app yarn create react-app --template typescript test-cra
cd test-cra && rm -rf ./{.pnp.js,.yarn,yarn.lock}
Set local yarn version to 2.x yarn set version berry && yarn set version latest
Verify version yarn --version > 2.4.0
Install dependencies yarn up
Yarn needs those as direct dependencies: yarn add eslint-config-react-app react-refresh
Confirm it works: yarn start
Remove import React from 'react'; from src/App.tsx
Set fallback mode to none yarn config set pnpFallbackMode none && yarn
Confirm it breaks: yarn start
Failed to compile.
src/App.tsx
Line 6:5: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 7:7: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 8:9: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 9:9: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 10:16: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 12:9: 'React' must be in scope when using JSX react/react-in-jsx-scope
Search for the keywords to learn more about each error.
Add react as dependency of react-scripts via packageExtensions:
yarn config set packageExtensions --json '{"react-scripts@*": {"peerDependencies": {"react": "*"}}}'
Install dependencies with updated extensions yarn
Verify it works again yarn start
Expected behavior
New JSX works with yarn 2 pnp with zero changes
Actual behavior
Yarn does not allow react to be resolved as indirect dependency, resulting in failed detection and fallback to classic.
Reproducible demo
The text was updated successfully, but these errors were encountered:
Describe the bug
With Yarn 2 PnP enabled, new JSX support is not detected due to the fact that Yarn does not allow indirect dependencies to be required.
react-scripts
does not listreact
in dependencies.Currently default for
pnpFallbackMode
isdependencies-only
for regular projects, but for workspaces it is forced tonone
Yarn exception is swallowed silently:
create-react-app/packages/react-scripts/config/webpack.config.js
Lines 74 to 85 in 282c03f
Did you try recovering your dependencies?
$ yarn --version
2.4.0
Which terms did you search for in User Guide?
Environment
react-scripts@npm:4.0.1 (expand)
Steps to reproduce
For workspace variant:
mkdir yarnws && cd yarnws
yarn set version berry && yarn set version latest
yarn --version
> 2.4.0yarn init -w
(cd packages/ && yarn create react-app --template typescript test-cra)
rm -rf packages/test-cra/{.pnp.js,.yarn,yarn.lock}
yarn up
yarn workspace test-cra add eslint-config-react-app react-refresh
yarn workspace test-cra start
import React from 'react';
fromsrc/App.tsx
yarn workspace test-cra start
yarn
yarn workspace test-cra start
For regular install:
yarn create react-app --template typescript test-cra
cd test-cra && rm -rf ./{.pnp.js,.yarn,yarn.lock}
yarn set version berry && yarn set version latest
yarn --version
> 2.4.0yarn up
yarn add eslint-config-react-app react-refresh
yarn start
import React from 'react';
fromsrc/App.tsx
yarn config set pnpFallbackMode none && yarn
yarn start
yarn
yarn start
Expected behavior
New JSX works with yarn 2 pnp with zero changes
Actual behavior
Yarn does not allow react to be resolved as indirect dependency, resulting in failed detection and fallback to classic.
Reproducible demo
The text was updated successfully, but these errors were encountered: