I'm trying to take a string containing markdown in a Svelte template and use that as part of a Svelte component using mdsvex I have the following code in App.svelte:
<script>
import { compile } from 'mdsvex';
import Counter from './lib/Counter.svelte'
const transformed_code = compile(`
# Hello world
This is a paragraph
<Counter />
`, {});
</script>
<div id="content"></div>
Once that's done, I want to add the result inside the #content box. When I run the compile step, I get the following error:
Uncaught (in promise) ReferenceError: process is not defined
What exactly am I doing wrong? And is this actually possible to do using mdsvex? Thanks for any help?
The module is intended to be used on the server and uses the Node variable process. The playground page shims the variable based on this: https://github.com/defunctzombie/node-process/blob/master/browser.js
You can define a process object like that and assign it on the window. Make sure that this code runs on the client:
window.process = { /* fake process here */ }
Once this is done, the code will execute, but the Counter will not work like this; the import does nothing. The output of mdsvex has to be compiled with Svelte, which generates code that tries to access an undefined Counter component.
There are multiple possible approaches:
target option)If you have nested component imports, option 2 is probably the most viable, since you then can adjust all import URLs at the time you generate the compiled output.