Skip to content
New issue

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

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

Already on GitHub? Sign in 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants