Compilation error when using yarn 3

[SuibianP]

Describe the bug

I am trying to use the latest stable version of yarn (3.2.1) with create-react-app to create the boilerplate code for a TypeScript React application, as shown in this SO answer. The generation went without errors, but a compilation error in the test file appears when attempting to run the app.

Using the old yarn (1.22.15) works without such issue, although package.json and everything under src/ are identical.

Did you try recovering your dependencies?

Tried to no avail. Yarn version is 3.2.1.

While unlikely relevant, yarn output some warning-like content.

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

Which terms did you search for in User Guide?

yarn 2 yarn 3 toBeInTheDocument

Environment

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

Steps to reproduce

1. Create a new app using the method here. Add --template typescript to the end of the actual create line.
2. yarn start in the newly create app directory

Expected behavior

There should be no errors, similar to running under 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.

Actual behavior

The error below appears both in the console and the webpage.

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 |

Reproducible demo

archive.tar.gz

yarn then yarn start should be sufficient to demonstrate the issue.

[CheoR]

Any update on this? I've run into this issue as well.

[difilippoagustin]

Hi! any updates?
I could "fix" it temporally adding this piece of code

"exclude": [
    "*/**/*.test.tsx"
  ]

to your tsconfig.json file.

[sbitenc]

Hi, having the same issue. I cannot use yarn create react-app name --template typescriptclear with latest yarn

[sbitenc]

For anyone being bummed by this, i solved it using this:

1. remove yarn.lock

2. remove .pnp.cjs

3. remove .pnp.loader.mjs

4. add .yarnrc.yml file in root folder

nodeLinker: node-modules

yarnPath: .yarn/releases/yarn-3.2.1.cjs

run yarn install

should work now.
When this issue is solved, simply remove the yarnrc.yml file

[evokeego]

I was able to solve this and keep my nodeLinker: pnp!

Context: I have a monorepo setup with Lerna Yarn 4 using TypeScript & Create React App.

I followed Yarn's TypeScript + PnP quick start recipe

# in my monorepo root...
yarn add --dev typescript
yarn dlx @yarnpkg/sdks vscode
yarn plugin import typescript

Then did some stuff from this SO post:

# in my app package root within the monorepo...
yarn add -D @testing-library/jest-dom

including adding this to my app's ts config compiler options:

"types": ["node", "jest", "@testing-library/jest-dom"]

which fixed almost everything.

To make the toBeInTheDocument error to finally resolve, I did a yarn remove @testing-library/jest-dom and a yarn add @testing-library/jest-dom@^5.16.4 where ^5.16.4 was the version in my package.json I just removed. That remove and readd also added "@types/testing-library__jest-dom": "^5" to my devDependencies which I assume may have been the fix.

[yuriwc]

For anyone being bummed by this, i solved it using this:

1. remove yarn.lock

2. remove .pnp.cjs

3. remove .pnp.loader.mjs

4. add `.yarnrc.yml` file in root folder

nodeLinker: node-modules

yarnPath: .yarn/releases/yarn-3.2.1.cjs

run yarn install

should work now. When this issue is solved, simply remove the yarnrc.yml file

Yesss, Working now

[Nahid570]

For anyone being bummed by this, i solved it using this:

1. remove yarn.lock
2. remove .pnp.cjs
3. remove .pnp.loader.mjs
4. add .yarnrc.yml file in root folder

nodeLinker: node-modules

yarnPath: .yarn/releases/yarn-3.2.1.cjs

run yarn install

should work now. When this issue is solved, simply remove the yarnrc.yml file

Thank You So Much.