pnpm causes vite to not find CSS files in node_modules

[yolio2003]

[plugin:vite:css] [postcss] ENOENT: no such file or directory, open '@fontsource/spline-sans-mono/400.css'
/Users/admin/Documents/tc/tcnb/docs/test.html:undefined:null
at async open (node:internal/fs/promises:638:25)
at async Object.readFile (node:internal/fs/promises:1242:14)
at async Object.load (file:///Users/admin/Documents/tc/tcnb/node_modules/.pnpm/vite@7.0.6/node_modules/vite/dist/node/chunks/dep-BHkUv4Z8.js:32342:19)
at async loadImportContent (file:///Users/admin/Documents/tc/tcnb/node_modules/.pnpm/vite@7.0.6/node_modules/vite/dist/node/chunks/dep-DcjhO6Jt.js:403:19)
at async Promise.all (index 0)
at async resolveImportId (file:///Users/admin/Documents/tc/tcnb/node_modules/.pnpm/vite@7.0.6/node_modules/vite/dist/node/chunks/dep-DcjhO6Jt.js:388:27)
at async parseStyles$1 (file:///Users/admin/Documents/tc/tcnb/node_modules/.pnpm/vite@7.0.6/node_modules/vite/dist/node/chunks/dep-DcjhO6Jt.js:341:4)
at async Object.Once (file:///Users/admin/Documents/tc/tcnb/node_modules/.pnpm/vite@7.0.6/node_modules/vite/dist/node/chunks/dep-DcjhO6Jt.js:469:20)
at async LazyResult.runAsync (/Users/admin/Documents/tc/tcnb/node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/lazy-result.js:293:11)
at async runPostCSS (file:///Users/admin/Documents/tc/tcnb/node_modules/.pnpm/vite@7.0.6/node_modules/vite/dist/node/chunks/dep-BHkUv4Z8.js:32399:19)
Click outside, press Esc key, or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.js.

vite v7.0.6 building for production...
Unable to resolve `@import "@fontsource/spline-sans-mono/400.css"` from /Users/admin/Documents/tc/tcnb/docs
✓ 94 modules transformed.
✗ Build failed in 126ms
node:internal/modules/run_main:122
    triggerUncaughtException(
    ^

[vite:css] [postcss] ENOENT: no such file or directory, open '@fontsource/spline-sans-mono/400.css'
file: /xxxx/docs/test.html?html-proxy&inline-css&index=0.css:undefined:NaN
    at async open (node:internal/fs/promises:638:25)
    at async Object.readFile (node:internal/fs/promises:1242:14)
    at async Object.load (file:///Users/admin/Documents/tc/tcnb/node_modules/.pnpm/vite@7.0.6/node_modules/vite/dist/node/chunks/dep-BHkUv4Z8.js:32342:19)
    at async loadImportContent (file:///Users/admin/Documents/tc/tcnb/node_modules/.pnpm/vite@7.0.6/node_modules/vite/dist/node/chunks/dep-DcjhO6Jt.js:403:19)
    at async Promise.all (index 0)
    at async resolveImportId (file:///Users/admin/Documents/tc/tcnb/node_modules/.pnpm/vite@7.0.6/node_modules/vite/dist/node/chunks/dep-DcjhO6Jt.js:388:27)
    at async parseStyles$1 (file:///Users/admin/Documents/tc/tcnb/node_modules/.pnpm/vite@7.0.6/node_modules/vite/dist/node/chunks/dep-DcjhO6Jt.js:341:4)
    at async Object.Once (file:///Users/admin/Documents/tc/tcnb/node_modules/.pnpm/vite@7.0.6/node_modules/vite/dist/node/chunks/dep-DcjhO6Jt.js:469:20)
    at async LazyResult.runAsync (/Users/admin/Documents/tc/tcnb/node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/lazy-result.js:293:11)
    at async runPostCSS (file:///Users/admin/Documents/tc/tcnb/node_modules/.pnpm/vite@7.0.6/node_modules/vite/dist/node/chunks/dep-BHkUv4Z8.js:32399:19) {
  errno: -2,
  code: 'PLUGIN_ERROR',
  syscall: 'open',
  path: '@fontsource/spline-sans-mono/400.css',
  loc: { file: undefined, line: undefined, column: NaN },
  pluginCode: '\n' +

[mbostock]

This appears to be an issue with pnpm; I was able to reproduce this error with the test-notebook-kit minimal repo. That repo builds fine with npm and Yarn (classic).

As a workaround, you can install the fonts directly in your package so that Vite can resolve them:

pnpm add @fontsource/inter @fontsource/spline-sans-mono @fontsource/source-serif-4

Possibly this means that we need to declare these as peerDependencies rather than dependencies? Or perhaps we need to override Vite’s resolution behavior so that it resolves relative to the @observablehq/notebook-kit dependency, rather than the root dependency?

[mbostock]

I think the best solution here is to just promote it to an (informal) peer dependency for pnpm, so I’ve added that to the docs. It’s an optional because you don’t have to use these fonts (if you override the styles to point to different fonts).