unplugin, vite, pnpm (TS2307: Cannot find module 'webpack' or its corresponding type declarations)

[charles-allen]

TL;DR

I'm using Vite. My build complains Cannot find webpack. It seems strange that I need webpack types.

Background / context

I'm using unplugin-icons in a Vite / Vue 3 / TypeScript project. This is my build script:

"build": "vue-tsc --project tsconfig.build.json --noEmit && vite build",

I'm trying to migrate to pnpm; now the build fails (I assume because pnpm disallows coincidental resolution of @types/webpack from another dep):

../../node_modules/.pnpm/[email protected][email protected]/node_modules/unplugin/dist/index.d.ts:3:49 - error TS2307: Cannot find module 'webpack' or its corresponding type declarations.

3 import { Compiler, WebpackPluginInstance } from 'webpack';
                                                  ~~~~~~~~~

../../node_modules/.pnpm/[email protected][email protected]/node_modules/unplugin/dist/index.d.ts:4:45 - error TS2307: Cannot find module 'webpack' or its corresponding type declarations.

4 export { Compiler as WebpackCompiler } from 'webpack';
                                              ~~~~~~~~~

../../node_modules/.pnpm/[email protected]/node_modules/webpack-virtual-modules/lib/index.d.ts:1:31 - error TS2307: Cannot find module 'webpack' or its corresponding type declarations.

1 import type { Compiler } from 'webpack';
                                ~~~~~~~~~

Solutions?

I can see that I have [email protected][email protected] (Vite-specific) in my node_modules/.pnpm directory. But inside that is a plain copy of unplugin which exports index.d.ts pointing at webpack. Which of these is the intended solution?

1. I should pnpm -D @types/webpack
2. I should add --skipLibCheck to my build script
3. Something else

[antfu]

I think this is more due to pnpm no hosting by default so TypeScript failed to grab the types. Which I don't think is related to this plugin. Either your 1 and 2 solution sounds valid to me.

[charles-allen]

Thanks for looking into it :)

It turned out that one of our Vue libs has a hard-dependency on webpack (also a little odd?), and we'd missed the @types/webpack install for that, so once I'd resolved that I had already gone with #1; unlike pnpm, TypeScript has no problem accepting types from any source.

FYI - I only mentioned it here because I saw a discussion by the TypeScript team about publishing types, where they advocate that required types should be in dependencies. It seems like unplugin is doing something clever to support webpack, rollup, and vite via peerDependencies & multiple builds; I was just wondering if that could be extended to the types. Maybe but TypeScript is missing a concept like "you only need these types if you install that peer".

[charles-allen]

And thanks for the awesome libs!