Yarn 2 and type errors in 9.4.5-canary.42

[ramblehead]

When building typescript packages, build process occasionally falls-out with "strange" errors such as:

$ yarn build
Failed to compile.

./src/pages/authorise.tsx:52:7
Type error: JSX element class does not support attributes because it does not have a 'props' property.

  50 |   if(state.error.status !== OK || !props.authoriseRequest) {
  51 |     return (
> 52 |       <NextError
     |       ^
  53 |         statusCode={state.error.status}
  54 |         title={state.error.statusText}
  55 |       />

My Emacs is configured with tide. I used it to navigate to NextError (preliminarily running yarn unplug next):

Thus, typescript cannot find react types and Error component gets type any. When importing such NextError, it has type any instead of JSX derivative. That is the reason why the build fails. The above screenshots mean that react types dependency is not recognised by yarn 2 and it cannot suggest that dependencies or peerDependencies are missing.

Using the hint from Emacs, the following lines can be added to .yarnrc.yml:

packageExtensions:
  next@*:
    peerDependencies:
      "@types/react": "*"

Then, the reported error changes:

So, typescript can now find '@types/react', however it doesn't see my tsconfig.json, which is located in yarn repository root and has "esModuleInterop": true line in it.

Therefore, copying https://github.com/vercel/next.js/blob/canary/packages/next/tsconfig.json to the location of the unplugged next package, which is in my case /home/rh/projects/artizanya-county/.yarn/unplugged/next-virtual-4bd03d0348/node_modules/next. After that all next type errors are getting resolved and yarn build completes successfully.

Based on the above finding, I would like to suggest to:

• add @types/react to next peerDependencies;
• add tsconfig.json to the next npm package root;
• probably, it a good idea to add all external modules imported in *.d.ts to next peerDependencies (or dependencies) as well.

Thank you for the great library!

[ramblehead]

Some further investigations:

Instead of peerDependencies or dependencies, optionalDependencies can also be used in this case. The following lines in .yarnrc.yml seem to work ok:

  next@*:
    optionalDependencies:
      "@types/react": "*"

optionalDependencies might be a better option to reference external type libraries as, strictly speaking, typescript is not required to write valid javascript.

Also, adding tsconfig.json to the next npm package root is not required for successful yarn build (defined as "build": "next build"). However, It is nice to have it there to avoid ts 'esModuleInterop' flag error [1259] (and, possibly, other ts errors) when opening *.d.ts files in "language-servers-capable" editors.

[merceyz]

The @types/react part has been fixed upstream in Yarn, with yarnpkg/berry#1601 we automatically set @types/react as a peer dependency