Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

New JSX support detection does not work with Yarn 2 PnP #10363

Closed
Xerkus opened this issue Jan 11, 2021 · 2 comments
Closed

New JSX support detection does not work with Yarn 2 PnP #10363

Xerkus opened this issue Jan 11, 2021 · 2 comments

Comments

@Xerkus
Copy link

Xerkus commented Jan 11, 2021

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:

const hasJsxRuntime = (() => {
if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
return false;
}
try {
require.resolve('react/jsx-runtime');
return true;
} catch (e) {
return false;
}
})();

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:resolve@1.18.1#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:

  1. Create test directory
    mkdir yarnws && cd yarnws
  2. Set local yarn version to 2.x
    yarn set version berry && yarn set version latest
  3. Verify version
    yarn --version > 2.4.0
  4. Init yarn workspace
    yarn init -w
  5. Create react app
    (cd packages/ && yarn create react-app --template typescript test-cra)
  6. Remove bits not used in workspace install
    rm -rf packages/test-cra/{.pnp.js,.yarn,yarn.lock}
  7. Install dependencies
    yarn up
  8. Yarn needs those as direct dependencies:
    yarn workspace test-cra add eslint-config-react-app react-refresh
  9. Confirm it works:
    yarn workspace test-cra start
  10. Remove import React from 'react'; from src/App.tsx
  11. 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.
    
  12. Add react as dependency of react-scripts via packageExtensions:
    yarn config set packageExtensions --json '{"react-scripts@*": {"peerDependencies": {"react": "*"}}}'
  13. Install dependencies with updated extensions
    yarn
  14. Verify it works again
    yarn workspace test-cra start

For regular install:

  1. Create test app
    yarn create react-app --template typescript test-cra
  2. cd test-cra && rm -rf ./{.pnp.js,.yarn,yarn.lock}
  3. Set local yarn version to 2.x
    yarn set version berry && yarn set version latest
  4. Verify version
    yarn --version > 2.4.0
  5. Install dependencies
    yarn up
  6. Yarn needs those as direct dependencies:
    yarn add eslint-config-react-app react-refresh
  7. Confirm it works:
    yarn start
  8. Remove import React from 'react'; from src/App.tsx
  9. Set fallback mode to none
    yarn config set pnpFallbackMode none && yarn
  10. 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.
    
  11. Add react as dependency of react-scripts via packageExtensions:
    yarn config set packageExtensions --json '{"react-scripts@*": {"peerDependencies": {"react": "*"}}}'
  12. Install dependencies with updated extensions
    yarn
  13. 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

@merceyz
Copy link
Contributor

merceyz commented Jan 19, 2021

Fixed in #9872

@Xerkus
Copy link
Author

Xerkus commented Feb 5, 2021

Fixed in 4.0.2 release

@Xerkus Xerkus closed this as completed Feb 5, 2021
# for free to join this conversation on GitHub. Already have an account? # to comment
Projects
None yet
Development

No branches or pull requests

2 participants