Berry: [Bug] TypeScript Create React App projects do not work within workspaces.

[DylanVann]

• [x] I'd be willing to implement a fix

More of a maybe on that. I have no idea why this bug occurs. If I get some hint I could possibly help with implementing a fix. The types for jest are installed, so I'm not sure why they cannot be found.

Describe the bug

Failed to compile.

undefined
TypeScript error in undefined(undefined,undefined):
Cannot find type definition file for 'jest'.  TS2688

To Reproduce

• Create a workspaces project.
• Create a CRA app within packages. e.g. create-react-app app --template typescript --pnp
  
  
  
  • I'm not sure the --pnp flag does anything.
  
  
  • At this point I delete yarn.lock within app, as well as the pnp file.
  
  
• Try to run start for the app. e.g. yarn workspace app start

Here's a repo: https://github.com/DylanVann/yarn-berry-create-react-app-bug

Environment if relevant (please complete the following information):

• OS: macOS 10.15.2
• Node: v13.7.0
• Yarn: v2.0.0-rc.28

[sjmeverett]

I'd just like to add that a similar thing happens for me not in a workspace project, so it might be a red herring that it has anything to do with workspaces.

i.e. I run this:

~/Code $ yarn dlx create-react-app app --template typescript --pnp
~/Code $ cd app
~/Code/app $ yarn start

And I get this:

Failed to compile.

undefined
TypeScript error in undefined(undefined,undefined):
Cannot find type definition file for 'color-name'.  TS2688

Versions:

• MacOS Catalina: 10.15.1
• Node: v12.7.0
• Yarn: 2.0.0-rc.27
• create-react-app: 3.3.1

[haydnhkim]

It also happens in next.js using typescript.
If yarn2 doesn't use a workspace, that's fine. but if I make it a workspace, next build won't work.

root package.json

{
  ...
  "workspaces": [
    "packages/*"
  ],
  "scripts": {
    "build": "yarn workspace dev-test-next-app build",
  }
}

packages/app/package.json

{
  ...
  "name": "dev-test-next-app",
  "scripts": {
    "build": "next build"
  }
}

result:

$ yarn build
Creating an optimized production build

Failed to compile.

ERROR in undefined(undefined,undefined):
undefined:undefined Cannot find type definition file for 'node'.

> Build error occurred
Error: > Build failed because of webpack errors
    at build (/Users/haydn/Documents/test/next-app/.yarn/$$virtual/next-virtual-c45165e61c/0/cache/next-npm-9.2.1-9e2a04bc32-1.zip/node_modules/next/dist/build/index.js:10:900)

versions:

• MacOS Mojave: 10.14.6
• Node: v12.14.1
• Yarn: 2.0.0-rc.27
• next: 9.2.1

[chrislambe]

Same issue here. Yarn 2 monorepo with PnP, trying to yarn start a CRA project.

$ yarn workspace foo start
Failed to compile.

undefined
TypeScript error in undefined(undefined,undefined):
Cannot find type definition file for 'flat'.  TS2688

Versions:

• macOS Catalina: 10.15.2
• Node: v10.16.0
• Yarn: 2.0.0-rc.29
• CRA (react-scripts): 3.3.1

[Felix-Indoing]

CRA version 3.4.0 with typescript in yarn 2 workspaces when execute yarn workspace foo start procude the following:

Failed to compile.

./src/App.tsx
Module not found: Something that got detected as your top-level application (because it doesn't seem to belong to any package) tried to access a package that is not declared in your dependencies

[jacogr]

At least in my case removing typeRoots from the tsconfig.json solves the issue. (Which is not great in all cases since there are custom types that are published in a seperate repo)

I believe the "typeRoots": ["./node_modules/@types", ...] does not quite what it as intended to do here, possibly due to the ./node_modules included there.

YYMV, played around it and removing the roots solved the issue for me with @types/jest, however sadly this is not really a solution I can apply to all my repos.

[arcanis]

I didn't manage to reproduce your issues (even following your repros :(), but @ucarion provided one lately which had the same error: https://github.com/ucarion/berry-next-typescript-repro

Thanks to this, I've just released a fix in ts-pnp which I think should also fix any similar problem. If that's not the case, please reopen an issue and 🙏🙏🙏 make sure the repro is as simple as possible so that we can get straight to the fix 🙂

(Note: to use the ts-pnp fix: open your lockfile, remove the ts-pnp entries, then run yarn install)

[sjmeverett]

Hi @arcanis, thanks for your work on this. Unfortunately I've still got a problem, please see https://github.com/sjmeverett/berry-react-app for a repro.

I can confirm it works for a simple project now though 👍 it's just workspaces that cause a problem.

[sjmeverett]

Actually I've found the problem. react-scripts depends on a specific version of ts-pnp, which doesn't include the fix.

This will get it to work for now (in .yarnrc.yml):

packageExtensions:
  react-scripts@*:
    dependencies:
      ts-pnp: "^1.2.0"

And you may also need to delete the ts-pnp entries in your yarn.lock