yarn pnp doesn't work with typescript

[bondz]

Set up a pnp typescript project
npx create-react-app pnp --use-pnp --typescript or npx create-react-app pnp --typescript --use-pnp order doesn't matter

You then get

yarn add v1.12.1
[1/5] 🔍  Resolving packages...
[2/5] 🚚  Fetching packages...
[3/5] 🔗  Linking dependencies...
[5/5] 📃  Building fresh packages...
success Saved lockfile.
success Saved 8 new dependencies.
info Direct dependencies
├─ @types/jest@23.3.9
├─ @types/node@10.12.1
├─ @types/react-dom@16.0.9
├─ @types/react@16.4.18
├─ react-dom@16.6.0
├─ react-scripts@2.1.0
├─ react@16.6.0
└─ typescript@3.1.4
info All dependencies
├─ @types/jest@23.3.9
├─ @types/node@10.12.1
├─ @types/react-dom@16.0.9
├─ @types/react@16.4.18
├─ react-dom@16.6.0
├─ react-scripts@2.1.0
├─ react@16.6.0
└─ typescript@3.1.4
✨  Done in 14.72s.
We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.

It looks like you're trying to use TypeScript but do not have typescript installed.
Please install typescript by running yarn add typescript.
If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files).


Aborting installation.
  node --require /Users/bond/Projects/pnp-test/.pnp.js has failed.

Deleting generated file... package.json
Deleting generated file... yarn.lock
Done.

---

Environment

  System:
    OS: macOS 10.14
    CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
  Binaries:
    Node: 8.12.0 - /usr/local/bin/node
    Yarn: 1.12.1 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  npmGlobalPackages:
    create-react-app: Not Found

[hmeissner]

The problem is that even if we get around the typescript missing error, I think the solution will still be blocked by microsoft/TypeScript#28289

[arcanis]

No it's actually a bit easier in this case. TypeScript support for tsc (and vscode) is currently blocked by microsoft/TypeScript#28289, but that's only for the tsc command line tool. The Webpack plugins aren't necessarily affected.

So having pnp support inside the TS compilers is doable. It's already in ts-loader, and fork-ts-checker-webpack-plugin (that create-react-app uses under the hood) already has an intent of implement (TypeStrong/fork-ts-checker-webpack-plugin#181). Just remains making the PR itself ☺️

[hronro]

Any updates?

[arcanis]

I haven't had the time yet to work on TypeStrong/fork-ts-checker-webpack-plugin#181 - it would be awesome if someone could help on this (I've already made a similar PR on ts-loader that can be used as inspiration: TypeStrong/ts-loader#862).

[crubier]

Any chance of seeing this land on 3.0 ? This would be really helpful, my team is getting depressed because of the long install times on our monorepo...

[arcanis]

I'm a bit short on time with the work on Yarn v2 and personal stuff, but I can offer advices and review time if you want to implement the resolveModuleName feature in fork-ts-checker-webpack-plugin!

[arcanis]

I found the time and pushed a PR: TypeStrong/fork-ts-checker-webpack-plugin#250

Once merged I'll make another one to create-react-app to upgrade fork-ts-checker-webpack-plugin and add support for the resolvers 🙂

[arcanis]

PR up at #6856

[NullVoxPopuli]

The solution for this shouldn't be in webpack, but in tsc and typescript-language-server. :-\