svelte-kit caching with yarn PNP

[Hecatron]

Describe the bug

Overview

Previously there was some discussion over the use of yarn PNP / berry here

• Incompatible with Yarn 2 #993

The main advantage of PNP is that it allows you to reference packages from a global cache on the disk (similar to pnpm except without the disk hard links). So it saves on disk space with the global cache setting enabled.

With yarn 3.2.1 PNP this sort of half works.
If you install and set everything up then it works fine on the first run, but then fails on the follow up run due to something related to the .svelte-kit caching

Reproduction

Example

First setup a new svelte kit app (skeleton)

yarn create svelte myapp
cd myapp

Switch to yarn berry with PNP

yarn set version berry

Add the following to the config under the kit section of svelte.config.js

kit: {
    vite: {server: {fs: {allow: ['.yarn']}}},
}

Try yarn dev

yarn dev

At this point things work on the first run
On follow up runs this error shows up

> p.replace is not a function
    at Object.toPortablePath (C:\SourceCode\project-docs\example\.pnp.cjs:2808:9)
    at PosixFS.mapToBase (C:\SourceCode\project-docs\example\.pnp.cjs:5313:18)
    at PosixFS.rmdirSync (C:\SourceCode\project-docs\example\.pnp.cjs:5230:39)
    at URLFS.rmdirSync (C:\SourceCode\project-docs\example\.pnp.cjs:5230:24)
    at _rmdirSync (node:internal/fs/rimraf:260:21)
    at rimrafSync (node:internal/fs/rimraf:193:7)
    at node:internal/fs/rimraf:253:9
    at Array.forEach (<anonymous>)
    at _rmdirSync (node:internal/fs/rimraf:250:7)
    at rimrafSync (node:internal/fs/rimraf:193:7)

If I delete the .svelte-kit directory then it works fine again for a first run.

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 5.34 GB / 15.68 GB
  Binaries:
    Node: 18.1.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.2.1 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.44)
    Internet Explorer: 11.0.19041.1566

Severity

annoyance

Additional Information

No response

[Hecatron]

Just to add the quick way to turn PNP off

.yarnrc.yml

nodeLinker: node-modules

This gets around the above but means more disk space used

[bluwy]

Not sure if they are plans to support this per https://kit.svelte.dev/faq#integrations-how-do-i-use-with-yarn-how-do-i-use-with-yarn-3

[Hecatron]

I wrote that (the yarn 3 part)
I figured I'd raise this issue as I suspect the problem with pnp might be with the way the caching works inside the .svelte-kit directory which might be a svelte-kit issue.

One thing that could be done to make things better is to add the .yarn directory into the defaults passed to vite

kit: {
    vite: {server: {fs: {allow: ['.yarn']}}},
}

[bluwy]

Oh sorry I didn't know that 😅 I'm not sure how yarn pnp affects .svelte-kit caching, but it seems like yarn is doing something off. Does specifying .yarn in server.fs.allow fixes it?

[Hecatron]

It doesn't fix the .svelte-kit caching issue (I'm not sure how to fix that outside of just deleting the cache directory each time before running)
but it does fix a warning vite shows up when you try to run things this way

[tyhi]

Awhile back I was trying to get sveltekit to work with yarn berry but ran into the same issue. I believe this PR will fix it on yarn's side: yarnpkg/berry#3889.

The third issue mentioned in that PR (3783) looks like a very similar error we are getting here, but I could be wrong.

[dominikg]

is there anything kit can/should do here? Looks like yarn pnp still has issues to solve on their end.

The fs.allow setting can be provided by pnp users in config. Automatic detection would be something either for vite or a supporting vite-plugin-yarn-pnp.

[tyhi]

Using yarn 3.2.2 which included the pr I had mentioned above the issue still persists.

[francisu]

I think this has been fixed in a more recent version of yarn. I have been able to successfully use sveltekit with the current version of yarn (4.1.1).

There is an issue with the use of prettier and plugins (which shows up in sveltekit), I was able to patch that in prettier though. See wooorm/import-meta-resolve#26 and prettier/prettier#15513.

[sunrabbit123]

Still reproduced in yarn 4.4.0 with next error

error when starting dev server:
Error: Could not resolve peer dependency "@sveltejs/vite-plugin-svelte" relative to your project — please install it and try again.
at resolve_peer_dependency (file:///home/sunrabbit/Desktop/myapp/.yarn/unplugged/@sveltejs-kit-virtual-60ca7c2c65/node_modules/@sveltejs/kit/src/utils/import.js:15:9)
at sveltekit (file:///home/sunrabbit/Desktop/myapp/.yarn/unplugged/@sveltejs-kit-virtual-60ca7c2c65/node_modules/@sveltejs/kit/src/exports/vite/index.js:155:27)
at async Promise.all (index 0)
at async asyncFlatten (file:///home/sunrabbit/Desktop/myapp/.yarn/virtual/vite-virtual-204348ee17/3/.yarn/berry/cache/vite-npm-5.4.0-6fbda5653e-10c0.zip/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:17506:12)
at async resolveConfig (file:///home/sunrabbit/Desktop/myapp/.yarn/virtual/vite-virtual-204348ee17/3/.yarn/berry/cache/vite-npm-5.4.0-6fbda5653e-10c0.zip/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:66040:27)
at async _createServer (file:///home/sunrabbit/Desktop/myapp/.yarn/virtual/vite-virtual-204348ee17/3/.yarn/berry/cache/vite-npm-5.4.0-6fbda5653e-10c0.zip/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:62627:18)
at async CAC. (file:///home/sunrabbit/Desktop/myapp/.yarn/virtual/vite-virtual-204348ee17/3/.yarn/berry/cache/vite-npm-5.4.0-6fbda5653e-10c0.zip/node_modules/vite/dist/node/cli.js:735:20)