Typescript Issues with Workspaces and Webpack

[wdfinch]

Hi all! I'm having issues with workspaces, webpack, and typescript, and I'm totally stumped on what's going on here. I would really appreciate if someone could tell me what's going wrong. Here's the issue:

I have a super simple demo webpack project that uses typescript for the webpack config file. If I build the project using webpack (yarn run webpack) and don't use workspaces, everything works fine. If I use yarn workspaces and nest my project as a child, I suddenly start getting typescript errors. I'm setting up my workspaces correctly and I don't understand what's going wrong. I've attached both a working copy of the project (not using workspaces) and a broken copy (using workspaces).

To reproduce the error:

1. Open the not working project
2. run yarn install with the latest version of yarn 2
3. run yarn run webpack inside the child directory

Thanks so much and I really appreciate any guidance you can offer.

webpack-working.zip
workspace-webpack-not-working.zip

[wdfinch]

The issue seems to be related to extending types. So I'm including a file of type definitions and that file then extends existing types. It works fine when I'm not using workspaces.

I'm just trying to follow this guide:
https://webpack.js.org/configuration/configuration-languages/#typescript

[merceyz]

The reason it works without the workspace is explained here https://yarnpkg.com/features/pnp/#different-behaviours-based-on-workspace--not-a-workspace, you can see it fail in your non-workspace version if you add pnpFallbackMode: none to .yarnrc.yml.

The fix for both is to create a .yarnrc.yml file with the following content and running yarn install

packageExtensions:
  "@types/webpack-dev-server@*":
    peerDependencies:
      "@types/webpack": "*"

[wdfinch]

Thank you for the reply. That solved the issue for me.

I don't understand why this works. If we import the typescript file, then the typescript compiler will parse the file and learn about the extensions/changes to the existing types. It seems like this wouldn't be a scoping issue since the library is not trying to require the file, we are. I don't see how modifying the peer dependencies changes the ability for us to import and prase the file.

[wdfinch]

Additionally, would it be possible to have this fail at the package manager level rather than the typescript level so we could get a more clear error message?

[merceyz]

@types/webpack-dev-server is declaring @types/webpack@^4 as a dependency while your workspace uses @types/webpack@^5 so you get two different versions, the packageExtensions changes it to a peer dependency so it gets the same version (and instance) as the workspace.

Additionally, would it be possible to have this fail at the package manager level rather than the typescript level so we could get a more clear error message?

In this case it's technically valid use of dependencies so no, afraid not

[wdfinch]

I see. So in other words it's extending the wrong version then. Ok, thanks so much for the help! As always really appreciate it.