Suddenly getting `Error: Cannot find module 'prismjs/components/prism-css'` with SvelteKit

[swyxio]

i moved swyxkit off of esbuild recently (due to netlify issues) and found that all my page renders with code samples were failing (https://swyxkit.netlify.app/welcome now 404's because i did clumsy error handling) due to this new error:

Dec 1, 12:35:14 AM: 98ea8b15 ERROR  Error: Cannot find module 'prismjs/components/prism-css'
Require stack:
- /var/task/node_modules/mdsvex/dist/main.cjs.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at load_language (/var/task/node_modules/mdsvex/dist/main.cjs.js:25714:3)
    at /var/task/node_modules/mdsvex/dist/main.cjs.js:25712:38
    at Set.forEach (<anonymous>)
    at load_language (/var/task/node_modules/mdsvex/dist/main.cjs.js:25712:20)
    at code_highlight (/var/task/node_modules/mdsvex/dist/main.cjs.js:25773:4)
    at /var/task/node_modules/mdsvex/dist/main.cjs.js:25745:25 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/var/task/node_modules/mdsvex/dist/main.cjs.js' ]
}

i dont have prismjs as a dep so actually took a bit of digging (npm ls prism-svelte) to figure out that it was mdsvex.

i dont know the direct cause yet but just filing an issue for others to find

[swyxio]

Given that this only happens in prod and not in dev, i have to conclude that this is because the prismjs transitive dep doesnt get bundled for serverless rendering

another bug to file for https://github.com/sveltejs/kit/issues/3535

[swyxio]

i think this is the offending line

https://github.com/pngwn/MDsveX/blob/6c60fe68c335fce559db9690fbf5e69ef539d37d/packages/mdsvex/src/transformers/index.ts#L529

[swyxio]

trying to solve it by installing prism as a dependency, not transitive devdep https://app.netlify.com/sites/swyxkit/deploys/6399e77da4ac1300087a13c7

update: didnt work

[swyxio]

was able to repro on a clean sveltekit install https://github.com/geoffrich/sveltekit-satori-mdsvex-test/pull/1

[codercatdev]

Yes same issue on codingcat rewrite.

For now I am manually importing to at least get most pages working.

import prism from 'prismjs';
import 'prismjs/components/prism-bash.js';
import 'prismjs/components/prism-dart.js';
import 'prismjs/components/prism-diff.js';
import 'prismjs/components/prism-typescript.js';
import 'prismjs/components/prism-jsx';
import 'prism-svelte';

https://github.com/CodingCatDev/v2-codingcat.dev/blob/5c562fe4e2415cbd2c15ec8a0ada7a30d4e187fa/apps/codingcatdev/src/lib/server/content.js#L9

[swyxio]

another related bug:

tried to solve this problem by swapping out the syntax highlighter:

but the dynamic import and error is still happening.

i suspect because even tho the highlighter is swapped out, the metadata isnt https://github.com/pngwn/MDsveX/blob/6c60fe68c335fce559db9690fbf5e69ef539d37d/packages/mdsvex/src/transformers/index.ts#L541

[stefanrows]

I have the same issue with an Astro project.

Error - Cannot find module './prism-markup-templating' Require stack: - /var/task/.netlify/functions-internal/entry.js - /var/task/entry.js - /var/runtime/index.mjs

Error: Cannot find module './prism-markup-templating'
Require stack:
- /var/task/.netlify/functions-internal/entry.js
- /var/task/entry.js
- /var/runtime/index.mjs
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at /var/task/.netlify/functions-internal/entry.js:11692:38
    at handleId (/var/task/.netlify/functions-internal/entry.js:11572:21)
    at loadComponentsInOrder (/var/task/.netlify/functions-internal/entry.js:11590:11)
    at Object.load (/var/task/.netlify/functions-internal/entry.js:11658:20)
    at loadLanguages2 (/var/task/.netlify/functions-internal/entry.js:11684:48)
    at ensureLoaded (/var/task/.netlify/functions-internal/entry.js:24461:37)
    at runHighlighterWithAstro (/var/task/.netlify/functions-internal/entry.js:24470:5)
    at AstroComponentInstance2.factory (/var/task/.netlify/functions-internal/entry.js:24488:35)

When I change my app from SSR to Static Rendering, prism works as intended, it seems.

[swyxio]

i dont have a repro anymore but for future devs reading this, check out swyxkit. open your own issues with yoru own repro