Cannot find module webpack and rspack

[hendrikbl]

Describe the bug

On a fresh vuetify 3 project, building fails after adding unplugin-vue-compoents.

Reproduction:

create vuetify project

pnpm create vuetify
.../Local/pnpm/store/v3/tmp/dlx-68692    |  +11 +
.../Local/pnpm/store/v3/tmp/dlx-68692    | Progress: resolved 11, reused 11, downloaded 0, added 11, done

Vuetify.js - Material Component Framework for Vue

√ Project name: ... vuetify-project
√ Which preset would you like to install? » Essentials (Vuetify, VueRouter, Pinia)
√ Use TypeScript? ... No / Yes
√ Would you like to install dependencies with yarn, npm, pnpm, or bun? » pnpm

add unplugin-vue-components

pnpm i -D unplugin-vue-components

// vite.config.ts

// Plugins
import vue from '@vitejs/plugin-vue'
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
import ViteFonts from 'unplugin-fonts/vite'
import Components from 'unplugin-vue-components/vite'

// Utilities
import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: { transformAssetUrls }
    }),
    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
    vuetify({
      autoImport: true,
      styles: {
        configFile: 'src/styles/settings.scss',
      },
    }),
    ViteFonts({
      google: {
        families: [{
          name: 'Roboto',
          styles: 'wght@100;300;400;500;700;900',
        }],
      },
    }),
    Components({
      dts: true,
    })
  ],
  define: { 'process.env': {} },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
    extensions: [
      '.js',
      '.json',
      '.jsx',
      '.mjs',
      '.ts',
      '.tsx',
      '.vue',
    ],
  },
  server: {
    port: 3000,
  },
})

// tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "esnext",
    "useDefineForClassFields": true,
    "allowSyntheticDefaultImports": true,
    "composite": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": false,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "types": ["node", "vuetify"],
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "vite.config.ts",
    "components.d.ts"
  ]
}

// try to build

pnpm build

> vuetify-project@0.0.0 build C:\Users\hendrikbl\projects\vuetify-project
> vue-tsc --noEmit && vite build

node_modules/.pnpm/unplugin@1.5.0/node_modules/unplugin/dist/index.d.ts:1:47 - error TS2307: Cannot find module '@rspack/core/dist/config/zod' or its corresponding type declarations.

1 import * as _rspack_core_dist_config_zod from '@rspack/core/dist/config/zod';
                                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/unplugin@1.5.0/node_modules/unplugin/dist/index.d.ts:2:26 - error TS2307: Cannot find module 'webpack' or its corresponding type declarations.

2 import * as webpack from 'webpack';
                           ~~~~~~~~~

node_modules/.pnpm/unplugin@1.5.0/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/unplugin@1.5.0/node_modules/unplugin/dist/index.d.ts:4:68 - error TS2307: Cannot find module 'webpack' or its corresponding type declarations.

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

node_modules/.pnpm/unplugin@1.5.0/node_modules/unplugin/dist/index.d.ts:14:62 - error TS2307: Cannot find module '@rspack/core' or its corresponding type declarations.

14 import { Compiler as Compiler$1, RspackPluginInstance } from '@rspack/core';
                                                                ~~~~~~~~~~~~~~

node_modules/.pnpm/unplugin@1.5.0/node_modules/unplugin/dist/index.d.ts:15:66 - error TS2307: Cannot find module '@rspack/core' or its corresponding type declarations.

15 export { Compiler as RspackCompiler, RspackPluginInstance } from '@rspack/core';
                                                                    ~~~~~~~~~~~~~~
node_modules/.pnpm/webpack-virtual-modules@0.5.0/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';
                                ~~~~~~~~~

Found 7 errors in 2 files.

Errors  Files
     6  node_modules/.pnpm/unplugin@1.5.0/node_modules/unplugin/dist/index.d.ts:1
     1  node_modules/.pnpm/webpack-virtual-modules@0.5.0/node_modules/webpack-virtual-modules/lib/index.d.ts:1
 ELIFECYCLE  Command failed with exit code 2.

Reproduction

See description

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (6) x64 Intel(R) Core(TM) i5-9500T CPU @ 2.20GHz
    Memory: 4.10 GB / 15.74 GB
  Binaries:
    Node: 18.16.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.7.6 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (117.0.2045.31)
    Internet Explorer: 11.0.19041.1566

Used Package Manager

pnpm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.