描述bug

我正在尝试使用最新的稳定版本的yarn(3.2.1)与create-react-app一起为TypeScript React应用程序创建样板代码，如图所示。生成过程没有错误，但在尝试运行应用程序时，测试文件中出现了编译错误。
使用旧版本的yarn(1.22.15)可以正常工作，尽管package.json和src/下的所有内容都是相同的。

你是否尝试恢复依赖项？

尝试过，但无济于事。Yarn版本是3.2.1。
虽然不太可能相关，yarn输出了一些类似警告的内容。

PS C:\Users\jiahu02\hangman\hangman> yarn
➤ YN0000: ┌ Resolution step
➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [d51fd] doesn't provide @babel/plugin-syntax-flow (pffa90), requested by eslint-plugin-flowtype
➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [d51fd] doesn't provide @babel/plugin-transform-react-jsx (pce73b), requested by eslint-plugin-flowtype
➤ YN0002: │ hangman@workspace:. doesn't provide @testing-library/dom (p5ee20), requested by @testing-library/user-event
➤ YN0002: │ react-dev-utils@npm:12.0.1 doesn't provide typescript (p59348), requested by fork-ts-checker-webpack-plugin
➤ YN0002: │ react-dev-utils@npm:12.0.1 doesn't provide webpack (p1012e), requested by fork-ts-checker-webpack-plugin
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 0s 670ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 765ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed in 0s 410ms
➤ YN0000: Done with warnings in 2s 511ms

你在用户指南中搜索了哪些术语？

yarn 2yarn 3toBeInTheDocument

环境

PS C:\Users\jiahu02\hangman\hangman> npx create-react-app --info

Environment Info:

  current version of create-react-app: 5.0.1
  running from C:\Users\jiahu02\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\create-react-app

  System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.2.1 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.47)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

重现步骤

1. 使用方法here创建一个新应用。在实际创建行的末尾添加--template typescript。
2. 在新建的应用目录中执行yarn start

预期行为

应该没有错误，类似于在yarn 1下运行的情况

PS C:\Users\jiahu02\old-hangman> yarn start
yarn run v1.22.15
$ react-scripts start
(node:8180) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:8180) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Compiled successfully!

You can now view old-hangman in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.170.232.170:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

webpack compiled successfully
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
No issues found.

实际行为

以下错误既出现在控制台又出现在网页上。

PS C:\Users\jiahu02\hangman\hangman> yarn start
(node:20128) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:20128) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Failed to compile.

Failed to load config "react-app" to extend from.
Referenced from: C:\Users\jiahu02\hangman\hangman\package.json
ERROR in Failed to load config "react-app" to extend from.
Referenced from: C:\Users\jiahu02\hangman\hangman\package.json

webpack compiled with 1 error
ERROR in src/App.test.tsx:8:23
TS2339: Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.
     6 |   render(<App />);
     7 |   const linkElement = screen.getByText(/learn react/i);
  >  8 |   expect(linkElement).toBeInTheDocument();
       |                       ^^^^^^^^^^^^^^^^^
     9 | });
    10 |
Compiled successfully!

You can now view hangman in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.170.232.170:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

webpack compiled successfully
ERROR in src/App.test.tsx:8:23
TS2339: Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.
     6 |   render(<App />);
     7 |   const linkElement = screen.getByText(/learn react/i);
  >  8 |   expect(linkElement).toBeInTheDocument();
       |                       ^^^^^^^^^^^^^^^^^
     9 | });
    10 |

可复现的演示

archive.tar.gz
然后执行yarn和yarn start就足以演示此问题。