Create-react-app: Typescript and pnp enabled app fails to compile

[mateja176]

Describe the bug

yarn start results in the following error

Failed to compile.

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

Did you try recovering your dependencies?

Ran yarn, using yarn@latest ( atm [email protected] )

Which terms did you search for in User Guide?

• typescript
• yarn pnp
• typescript and yarn pnp
• lodash

Environment

Environment Info:

  System:
    OS: Linux 5.0 Ubuntu 19.04 (Disco Dingo)
    CPU: (8) x64 AMD Ryzen 7 2700U with Radeon Vega Mobile Gfx
  Binaries:
    Node: 11.14.0 - ~/.nvm/versions/node/v11.14.0/bin/node
    Yarn: 1.17.3 - ~/.nvm/versions/node/v11.14.0/bin/yarn
    npm: 6.10.2 - ~/.nvm/versions/node/v11.14.0/bin/npm
  Browsers:
    Chrome: 75.0.3770.142
    Firefox: 68.0.1
  npmPackages:
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: 3.0.1

Steps to reproduce

(Write your steps here:)

1. create-react-app test --typescript --use-pnp
2. cd test
3. yarn
4. yarn start

Expected behavior

No error occurs and app start sucessfully

Actual behavior

Reproducible demo

https://github.com/mateja176/yarn-pnp-demo

[mateja176]

Related #5647

[mrmckeb]

I hit this recently too, and couldn't find a fix. @iansu perhaps we should ask the Yarn team for thoughts on this?

[iansu]

We can try but I think they're pretty focused on shipping Yarn 2 at the moment. cc @arcanis

[arcanis]

Fwiw I'd recommend using the v2 for any project using PnP.

Afaik a single blocker remains, which is the following error. We've recently fixed it in typescript-eslint master (https://github.com/typescript-eslint/typescript-eslint/pull/990), which should hopefully be released in the next few days.

Failed to load plugin '@typescript-eslint' declared in 'BaseConfig » /home/arcanis/cra-test/.yarn/virtual/eslint-config-react-app-virtual-fa3c1f4ab2/0/cache/eslint-config-react-app-npm-5.0.2-b7b16e6537-1.zip/node_modules/eslint-config-react-app/index.js#overrides[0]': A package is trying to access a peer dependency that should be provided by its direct ancestor but isn't

Required package: typescript (via "typescript")
Required by: tsutils@virtual:db6b93c726ffe978bd77e193f18a927c151ea6cc1f8f135748afebc0f8711d2c012ede19de70d3728ab968fc466d9b07698ccfcc97c03d093191cd80d35ad23f#npm:3.17.1 (via /home/arcanis/cra-test/.yarn/virtual/tsutils-virtual-4a3a585d45/0/cache/tsutils-npm-3.17.1-ed6df1e57e-1.zip/node_modules/tsutils/typeguard/2.8/node.js)

For now you can experiment by cloning typescript-eslint and yarn linking it to your project. Doing this seems to work fine for me 🙂

[iansu]

@arcanis thanks for the suggestion. It sounds like Yarn v2 is getting close to release? I personally can't wait for it! 🙌

[SEAPUNK]

This issue is reproducible with Yarn v2, fwiw:

Failed to compile.

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

[arcanis]

@SEAPUNK Can you send a PR to Yarn's E2E test? Afaik CRA, TS, and Yarn 2 work fine:
https://github.com/yarnpkg/berry/blob/master/.github/workflows/e2e-cra-workflow.yml

[SEAPUNK]

@arcanis Sure, I'll try to get a minimal repro first.

[SEAPUNK]

Never mind, it's not happening because of our CRA TS setup, it's happening because it's in our monorepo, I assume there are files in the directory above that are messing with how it starts up.

[timini]

Im also having this issue trying to use CRA as a monorepo package (yarn workspaces) with yarn PNP

[timini]

any clues not to solve? seems nohoist is not an option for PNP

[chrislambe]

Also running into this in a monorepo with CRA.

[Felix-Indoing]

Same problem here with CRA 3.4.1 & typescript 3.8.3 & yarn 2 monorepo:

Failed to compile.

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

[merceyz]

This has been fixed already, it was an issue in ts-pnp fixed in https://github.com/arcanis/ts-pnp/commit/66433e65cad9b1fbddac8349c352690c9c5f449a which was updated in https://github.com/facebook/create-react-app/pull/8947