Not working with yarn PnP

[LeaderbotX400]

When I attempt to load a new project using yarn pnp I get this lovely error

failed to load config from C:\projects\sites\router-testing\vite.config.ts
error when starting dev server:
Error: unplugin-vue-router tried to access @vue/compiler-sfc, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Required package: @vue/compiler-sfc (via "@vue\compiler-sfc")
Required by: unplugin-vue-router@virtual:a40d5af684f311521e9b2d5690fe3b63a250057a024ba8545fc41a891cd10652153ebee5739b4fcefee17ac8258089cc08af32f733ef452ce315014b7fdd537d#npm:0.3.2 (via C:\projects\sites\router-testing\.yarn\__virtual__\unplugin-vue-router-virtual-cf8f385e08\0\cache\unplugin-vue-router-npm-0.3.2-a2fd1b41f4-4f33822665.zip\node_modules\unplugin-vue-router\dist\)

Require stack:
- C:\projects\sites\router-testing\.yarn\__virtual__\unplugin-vue-router-virtual-cf8f385e08\0\cache\unplugin-vue-router-npm-0.3.2-a2fd1b41f4-4f33822665.zip\node_modules\unplugin-vue-router\dist\vite.js
- C:\projects\sites\router-testing\vite.config.ts
- C:\projects\sites\router-testing\.yarn\__virtual__\vite-virtual-b56c81fe45\0\cache\vite-npm-4.0.4-33a47fc7a2-eb86c8cdfe.zip\node_modules\vite\dist\node\chunks\dep-5e7f419b.js
    at require$$0.Module._resolveFilename (C:\projects\sites\router-testing\.pnp.cjs:19002:13)
    at require$$0.Module._load (C:\projects\sites\router-testing\.pnp.cjs:18852:42)
    at Module.require (node:internal/modules/cjs/loader:1105:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (C:\projects\sites\router-testing\.yarn\__virtual__\unplugin-vue-router-virtual-cf8f385e08\0\cache\unplugin-vue-router-npm-0.3.2-a2fd1b41f4-4f33822665.zip\node_modules\unplugin-vue-router\dist\vite.js:560:27)
    at Module._compile (node:internal/modules/cjs/loader:1218:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
    at require$$0.Module._extensions..js (C:\projects\sites\router-testing\.pnp.cjs:19046:33)
    at _require.extensions.<computed> [as .js] (file:///C:/projects/sites/router-testing/.yarn/__virtual__/vite-virtual-b56c81fe45/0/cache/vite-npm-4.0.4-33a47fc7a2-eb86c8cdfe.zip/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:62106:17)
    at Module.load (node:internal/modules/cjs/loader:1081:32)

once I set yarn to use node-modules instead of the new pnp api it works just fine

[posva]

I don’t use pnp so any help for this is welcome!

[LeaderbotX400]

UPDATE: there is a work around

Edit the .yarnrc.yml file to contain the following

packageExtensions:
  unplugin-vue-router@*:
    dependencies:
      "@vue/compiler-sfc": "*"

[wearypossum4770]

So I ran into the same issue but found the import statement needed work. I am using yarn berry currently version 3.5.1. The following change was sufficient.

-import { createRouter, createWebHistory } from 'vue-router/auto'
+import { createRouter, createWebHistory } from 'vue-router-auto'

[phamhongphuc]

I also got the same issue. I tried several different combinations and create a simple repo here (without any plugin) to reproduce the bug, hope it helps.

Node 20.11.1+ Yarn 3.8.1 + pnp ❌ Node 20.11.1+ Yarn 3.8.1 + pnpm ❌ Node 20.11.1+ Yarn 3.8.1 + node-modules ✔️