search

pngwn / MDsveX

A markdown preprocessor for Svelte.
https://mdsvex.pngwn.io
MIT License
2.46k stars 102 forks source link

Cannot find prismjs components at runtime on Vercel #548

Open CobyPear opened 1 year ago

CobyPear commented 1 year ago

My blog is using mdsvex to dynamically compile markdown files in a load fn in SvelteKit, then returns them to the client. I have been using {@html } for this and it works fine. I recently added a codeblock and I recieved an error after publishing the post:

Error: Cannot find module 'prismjs/components/prism-bash'
Require stack:
- /var/task/node_modules/.pnpm/mdsvex@0.10.6_svelte@3.58.0/node_modules/mdsvex/dist/main.cjs.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
    at Module._load (node:internal/modules/cjs/loader:922:27)
    at e.<computed>._module.Module._load (/var/task/___vc/__launcher/__launcher.js:14:2079)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:119:18)
    at load_language (/var/task/node_modules/.pnpm/mdsvex@0.10.6_svelte@3.58.0/node_modules/mdsvex/dist/main.cjs.js:25714:3)
    at code_highlight (/var/task/node_modules/.pnpm/mdsvex@0.10.6_svelte@3.58.0/node_modules/mdsvex/dist/main.cjs.js:25773:4)
    at /var/task/node_modules/.pnpm/mdsvex@0.10.6_svelte@3.58.0/node_modules/mdsvex/dist/main.cjs.js:25745:25
    at Array.map (<anonymous>)
    at /var/task/node_modules/.pnpm/mdsvex@0.10.6_svelte@3.58.0/node_modules/mdsvex/dist/main.cjs.js:25743:11

Do I need to install prismjs, and if so should it be listed as a peer dependency? edit: I tried installing prismjs as a prod dependency and it still failed. I will try a CDN import in the script tag to workaround for now. edit2: oh duh that didn't work since the module isn't found in the serverless fn, not the client side.

Thanks!

steven-aj commented 11 months ago

Have you tried <svelte:component this={content} /> instead of interpolating {@html content} on an element?

CobyPear commented 11 months ago

Hi, @steven-aj. I have tried that but I get the following error which I'm not really sure where to start with:

Error: <svelte:component this={...}> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules. Otherwise you may need to fix a <svelte:component this={...}>.