Closed
Description
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 list react
in dependencies.
Currently default for pnpFallbackMode
is dependencies-only
for regular projects, but for workspaces it is forced to none
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
current version of create-react-app: 4.0.1
running from /home/Xerkus/.npm/_npx/29234/lib/node_modules/create-react-app
System:
OS: Linux 5.9 Fedora 33 (Workstation Edition) 33 (Workstation Edition)
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Binaries:
Node: 14.15.4 - /usr/bin/node
Yarn: 2.4.0 - /usr/bin/yarn
npm: 6.14.10 - /usr/bin/npm
Browsers:
Chrome: 87.0.4280.141
Firefox: 84.0.2
npmPackages:
react: 17.0.1
react-dom: 17.0.1
react-scripts: 4.0.1
npmGlobalPackages:
create-react-app: Not Found
react-scripts@npm:4.0.1 (expand)
└─ react-scripts@npm:4.0.1
├─ Instances: 1
├─ Version: 4.0.1
│
├─ Exported Binaries
│ └─ react-scripts
│
└─ Dependencies
├─ @babel/core@npm:7.12.3 → npm:7.12.3
├─ @pmmmwh/react-refresh-webpack-plugin@npm:0.4.2 → npm:0.4.2
├─ @svgr/webpack@npm:5.4.0 → npm:5.4.0
├─ @typescript-eslint/eslint-plugin@npm:^4.5.0 → npm:4.12.0
├─ @typescript-eslint/parser@npm:^4.5.0 → npm:4.12.0
├─ babel-eslint@npm:^10.1.0 → npm:10.1.0
├─ babel-jest@npm:^26.6.0 → npm:26.6.3
├─ babel-loader@npm:8.1.0 → npm:8.1.0
├─ babel-plugin-named-asset-import@npm:^0.3.7 → npm:0.3.7
├─ babel-preset-react-app@npm:^10.0.0 → npm:10.0.0
├─ bfj@npm:^7.0.2 → npm:7.0.2
├─ camelcase@npm:^6.1.0 → npm:6.2.0
├─ case-sensitive-paths-webpack-plugin@npm:2.3.0 → npm:2.3.0
├─ css-loader@npm:4.3.0 → npm:4.3.0
├─ dotenv-expand@npm:5.1.0 → npm:5.1.0
├─ dotenv@npm:8.2.0 → npm:8.2.0
├─ eslint-config-react-app@npm:^6.0.0 → npm:6.0.0
├─ eslint-plugin-flowtype@npm:^5.2.0 → npm:5.2.0
├─ eslint-plugin-import@npm:^2.22.1 → npm:2.22.1
├─ eslint-plugin-jest@npm:^24.1.0 → npm:24.1.3
├─ eslint-plugin-jsx-a11y@npm:^6.3.1 → npm:6.4.1
├─ eslint-plugin-react-hooks@npm:^4.2.0 → npm:4.2.0
├─ eslint-plugin-react@npm:^7.21.5 → npm:7.22.0
├─ eslint-plugin-testing-library@npm:^3.9.2 → npm:3.10.1
├─ eslint-webpack-plugin@npm:^2.1.0 → npm:2.4.1
├─ eslint@npm:^7.11.0 → npm:7.17.0
├─ file-loader@npm:6.1.1 → npm:6.1.1
├─ fs-extra@npm:^9.0.1 → npm:9.0.1
├─ fsevents@patch:fsevents@^2.1.3#builtin<compat/fsevents> → patch:fsevents@npm%3A2.3.0#builtin<compat/fsevents>::version=2.3.0&hash=11e9ea
├─ html-webpack-plugin@npm:4.5.0 → npm:4.5.0
├─ identity-obj-proxy@npm:3.0.0 → npm:3.0.0
├─ jest-circus@npm:26.6.0 → npm:26.6.0
├─ jest-resolve@npm:26.6.0 → npm:26.6.0
├─ jest-watch-typeahead@npm:0.6.1 → npm:0.6.1
├─ jest@npm:26.6.0 → npm:26.6.0
├─ mini-css-extract-plugin@npm:0.11.3 → npm:0.11.3
├─ optimize-css-assets-webpack-plugin@npm:5.0.4 → npm:5.0.4
├─ pnp-webpack-plugin@npm:1.6.4 → npm:1.6.4
├─ postcss-flexbugs-fixes@npm:4.2.1 → npm:4.2.1
├─ postcss-loader@npm:3.0.0 → npm:3.0.0
├─ postcss-normalize@npm:8.0.1 → npm:8.0.1
├─ postcss-preset-env@npm:6.7.0 → npm:6.7.0
├─ postcss-safe-parser@npm:5.0.2 → npm:5.0.2
├─ prompts@npm:2.4.0 → npm:2.4.0
├─ react-app-polyfill@npm:^2.0.0 → npm:2.0.0
├─ react-dev-utils@npm:^11.0.1 → npm:11.0.1
├─ react-refresh@npm:^0.8.3 → npm:0.8.3
├─ resolve-url-loader@npm:^3.1.2 → npm:3.1.2
├─ resolve@patch:[email protected]#builtin<compat/resolve> → patch:resolve@npm%3A1.18.1#builtin<compat/resolve>::version=1.18.1&hash=3388aa
├─ sass-loader@npm:8.0.2 → npm:8.0.2
├─ semver@npm:7.3.2 → npm:7.3.2
├─ style-loader@npm:1.3.0 → npm:1.3.0
├─ terser-webpack-plugin@npm:4.2.3 → npm:4.2.3
├─ ts-pnp@npm:1.2.0 → npm:1.2.0
├─ url-loader@npm:4.1.1 → npm:4.1.1
├─ webpack-dev-server@npm:3.11.0 → npm:3.11.0
├─ webpack-manifest-plugin@npm:2.2.0 → npm:2.2.0
├─ webpack@npm:4.44.2 → npm:4.44.2
└─ workbox-webpack-plugin@npm:5.1.4 → npm:5.1.4
Steps to reproduce
For workspace variant:
- Create test directory
mkdir yarnws && cd yarnws
- Set local yarn version to 2.x
yarn set version berry && yarn set version latest
- Verify version
yarn --version
> 2.4.0 - Init yarn workspace
yarn init -w
- Create react app
(cd packages/ && yarn create react-app --template typescript test-cra)
- 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';
fromsrc/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';
fromsrc/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.