Compiling markdown at run-time in a Svelte component using mdsvex

user_5056347 0
Viewed 40

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?

svelte javascript
1 Answers

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:

  • Somehow inject the imported component constructor, e.g. via a prop (though I have run into errors because of an unset target option)
  • Precompile any component you want to use like this and make them available as a route that can imported from the compiled output
  • Compile the component on the fly. You will need to have some way to get the component source code for processing

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.

user_5467300
Related