Create-react-app: 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/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
info All dependencies
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
✨  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 https://github.com/Microsoft/TypeScript/issues/28289

[arcanis]

No it's actually a bit easier in this case. TypeScript support for tsc (and vscode) is currently blocked by https://github.com/Microsoft/TypeScript/issues/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 (https://github.com/Realytics/fork-ts-checker-webpack-plugin/issues/181). Just remains making the PR itself ☺️

[foisonocean]

Any updates?

[arcanis]

I haven't had the time yet to work on https://github.com/Realytics/fork-ts-checker-webpack-plugin/issues/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: https://github.com/TypeStrong/ts-loader/pull/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: https://github.com/Realytics/fork-ts-checker-webpack-plugin/pull/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. :-\

[crubier]

@NullVoxPopuli Yes but as you just saw in https://github.com/Microsoft/TypeScript/issues/28289 this does not seem like it is going to happen anytime soon, so I guess moving on with the proposed fix is the way to go.

[alaatm]

Is this in 3.0.1? It says it is in the release notes but the error is still there.

yarn run v1.16.0
$ react-scripts start
C:\personal-projs\we-there-yet-qm\.pnp.js:15914
    throw firstError;
    ^Error: Cannot find module 'react-dev-utils/crossSpawn'
Require stack:
- C:\Users\alaam\AppData\Local\Yarn\cache\v4\npm-react-scripts-3.0.1-e5565350d8069cc9966b5998d3fe3befe3d243ac\node_modules\react-scripts\bin\react-scripts.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:610:15)
    at Function.Module._resolveFilename (C:\personal-projs\we-there-yet-qm\.pnp.js:15871:44)
    at callNativeResolution (C:\personal-projs\we-there-yet-qm\.pnp.js:15476:19)
    at Object.resolveToUnqualified (C:\personal-projs\we-there-yet-qm\.pnp.js:15593:22)
    at Object.resolveRequest (C:\personal-projs\we-there-yet-qm\.pnp.js:15723:31)
    at Function.Module._resolveFilename (C:\personal-projs\we-there-yet-qm\.pnp.js:15905:30)
    at Function.Module._load (C:\personal-projs\we-there-yet-qm\.pnp.js:15821:31)
    at Module.require (internal/modules/cjs/loader.js:666:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (C:\Users\alaam\AppData\Local\Yarn\cache\v4\npm-react-scripts-3.0.1-e5565350d8069cc9966b5998d3fe3befe3d243ac\node_modules\react-scripts\bin\react-scripts.js:18:15)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[damianfijorek]

@alaatm I've got similar error when I run yarn create react-app another-app --typescript --use-pnp. I've run yarn create react-app another-app --typescript instead and then yarn --pnp. Then I've got exactly the same error so I run yarn install. Did not helped so I run it again as I was expecting to see success Already up-to-date but it seems that with pnp it always go through all the steps. This made yarn run start run. There were any changes to yarn.lock nor .pnp.js files. Now yarn create react-app another-app --typescript --use-pnp works too and I could not reproduce the issue anymore.

TL;DR; Run yarn install twice. 😃

[alaatm]

@damianfijorek That's weird, but the workaround did not work for me -.-

[iki]

[email protected] with [email protected] in node 10 on win 10 fails for me:

...\sample-react-ts-pnp\.pnp.js:15871
    throw firstError;
    ^

Error: Package "[email protected]" (via "...\AppData\Local\Yarn\Cache\v4\npm-react-scripts-3.0.1-e5565350d8069cc9966b5998d3fe3befe3d243ac\node_modules\react-scripts\config\paths.js") is trying to require the package "...\sample-react-ts-pnp\package.json" (via "...\sample-react-ts-pnp\package.json") without it being listed in its dependencies (@babel/core, @svgr/webpack, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, babel-eslint, babel-jest, babel-loader, babel-plugin-named-asset-import, babel-preset-react-app, camelcase, case-sensitive-paths-webpack-plugin, css-loader, dotenv, dotenv-expand, eslint, eslint-config-react-app, eslint-loader, eslint-plugin-flowtype, eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-react, eslint-plugin-react-hooks, file-loader, fs-extra, html-webpack-plugin, identity-obj-proxy, is-wsl, jest, jest-environment-jsdom-fourteen, jest-resolve, jest-watch-typeahead, mini-css-extract-plugin, optimize-css-assets-webpack-plugin, pnp-webpack-plugin, postcss-flexbugs-fixes, postcss-loader, postcss-normalize, postcss-preset-env, postcss-safe-parser, react-app-polyfill, react-dev-utils, resolve, sass-loader, semver, style-loader, terser-webpack-plugin, ts-pnp, url-loader, webpack, webpack-dev-server, webpack-manifest-plugin, workbox-webpack-plugin, react-scripts)
    at makeError (...\sample-react-ts-pnp\.pnp.js:55:17)
    at Object.resolveToUnqualified (...\sample-react-ts-pnp\.pnp.js:15611:17)
    at Object.resolveRequest (...\sample-react-ts-pnp\.pnp.js:15682:31)
    at Function.Module._resolveFilename (...\sample-react-ts-pnp\.pnp.js:15862:30)
    at Function.Module._load (...\sample-react-ts-pnp\.pnp.js:15780:31)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at getPublicUrl (...\AppData\Local\Yarn\Cache\v4\npm-react-scripts-3.0.1-e5565350d8069cc9966b5998d3fe3befe3d243ac\node_modules\react-scripts\config\paths.js:34:19)
    at Object.<anonymous> (...\AppData\Local\Yarn\Cache\v4\npm-react-scripts-3.0.1-e5565350d8069cc9966b5998d3fe3befe3d243ac\node_modules\react-scripts\config\paths.js:92:14)
    at Module._compile (internal/modules/cjs/loader.js:688:30)

Aborting installation.
  node --require ...\sample-react-ts-pnp\.pnp.js has failed.

and the same on node 12.7 fails differently:

...\sample-react-ts-pnp\.pnp.js:15871
    throw firstError;
    ^

Error: Package "[email protected]" (via "...\AppData\Local\Yarn\Cache\v4\npm-react-scripts-3.0.1-e5565350d8069cc9966b5998d3fe3befe3d243ac\node_modules\react-scripts\config\paths.js") is trying to require the package "...\sample-react-ts-pnp\package.json" (via "...\sample-react-ts-pnp\package.json") without it being listed in its dependencies (@babel/core, @svgr/webpack, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, babel-eslint, babel-jest, babel-loader, babel-plugin-named-asset-import, babel-preset-react-app, camelcase, case-sensitive-paths-webpack-plugin, css-loader, dotenv, dotenv-expand, eslint, eslint-config-react-app, eslint-loader, eslint-plugin-flowtype, eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-react, eslint-plugin-react-hooks, file-loader, fs-extra, html-webpack-plugin, identity-obj-proxy, is-wsl, jest, jest-environment-jsdom-fourteen, jest-resolve, jest-watch-typeahead, mini-css-extract-plugin, optimize-css-assets-webpack-plugin, pnp-webpack-plugin, postcss-flexbugs-fixes, postcss-loader, postcss-normalize, postcss-preset-env, postcss-safe-parser, react-app-polyfill, react-dev-utils, resolve, sass-loader, semver, style-loader, terser-webpack-plugin, ts-pnp, url-loader, webpack, webpack-dev-server, webpack-manifest-plugin, workbox-webpack-plugin, react-scripts)
    at makeError (...\sample-react-ts-pnp\.pnp.js:55:17)
    at Object.resolveToUnqualified (...\sample-react-ts-pnp\.pnp.js:15611:17)
    at Object.resolveRequest (...\sample-react-ts-pnp\.pnp.js:15682:31)
    at Function.Module._resolveFilename (...\sample-react-ts-pnp\.pnp.js:15862:30)
    at Function.Module._load (...\sample-react-ts-pnp\.pnp.js:15780:31)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at getPublicUrl (...\AppData\Local\Yarn\Cache\v4\npm-react-scripts-3.0.1-e5565350d8069cc9966b5998d3fe3befe3d243ac\node_modules\react-scripts\config\paths.js:34:19)
    at Object.<anonymous> (...\AppData\Local\Yarn\Cache\v4\npm-react-scripts-3.0.1-e5565350d8069cc9966b5998d3fe3befe3d243ac\node_modules\react-scripts\config\paths.js:92:14)
    at Module._compile (internal/modules/cjs/loader.js:777:30) {
  code: 'UNDECLARED_DEPENDENCY',
  data: {
    request: 'C:\\Users\\iki\\!src\\sample-react-ts-pnp\\package.json',
    issuer: 'C:\\Users\\iki\\AppData\\Local\\Yarn\\Cache\\v4\\npm-react-scripts-3.0.1-e5565350d8069cc9966b5998d3fe3befe3d243ac\\node_modules\\react-scripts\\config\\paths.js',
    issuerLocator: { name: 'react-scripts', reference: '3.0.1' },
    dependencyName: 'C:\\Users\\iki\\!src\\sample-react-ts-pnp\\package.json',
    candidates: [
      '@babel/core',
      '@svgr/webpack',
      '@typescript-eslint/eslint-plugin',
      '@typescript-eslint/parser',
      'babel-eslint',
      'babel-jest',
      'babel-loader',
      'babel-plugin-named-asset-import',
      'babel-preset-react-app',
      'camelcase',
      'case-sensitive-paths-webpack-plugin',
      'css-loader',
      'dotenv',
      'dotenv-expand',
      'eslint',
      'eslint-config-react-app',
      'eslint-loader',
      'eslint-plugin-flowtype',
      'eslint-plugin-import',
      'eslint-plugin-jsx-a11y',
      'eslint-plugin-react',
      'eslint-plugin-react-hooks',
      'file-loader',
      'fs-extra',
      'html-webpack-plugin',
      'identity-obj-proxy',
      'is-wsl',
      'jest',
      'jest-environment-jsdom-fourteen',
      'jest-resolve',
      'jest-watch-typeahead',
      'mini-css-extract-plugin',
      'optimize-css-assets-webpack-plugin',
      'pnp-webpack-plugin',
      'postcss-flexbugs-fixes',
      'postcss-loader',
      'postcss-normalize',
      'postcss-preset-env',
      'postcss-safe-parser',
      'react-app-polyfill',
      'react-dev-utils',
      'resolve',
      'sass-loader',
      'semver',
      'style-loader',
      'terser-webpack-plugin',
      'ts-pnp',
      'url-loader',
      'webpack',
      'webpack-dev-server',
      'webpack-manifest-plugin',
      'workbox-webpack-plugin',
      'react-scripts'
    ]
  }
}

Aborting installation.
  node --require ...\sample-react-ts-pnp\.pnp.js has failed.

[Ciantic]

This works but is needlessly complicated:

1. Get yarn 2., Go to empty directory

yarn set version berry
yarn dlx create-react-app --template typescript my-app
cd my-app
yarn add @yarnpkg/pnpify -D
yarn pnpify --sdk
// Open with vscode
// Go to currently broken tsx file
// Hit Ctrl+Shift+P, choose select Typescript version -> Use Workspace Version Pnipify
// Reload Vscode window
// Finally you might want to remove extra files from the root 
// Then run `yarn set version berry` in my-app too

[tydira]

I'm still getting this issue. When I try using @Ciantic's workaround, I get #10002 instead. I'm kind of at a loss for words; regardless of which version of yarn I use or how I invoke the various commands, yarn+pnp+typescript really doesn't want to work with create-react-app for me.