Cannot run compiled code in my client

[Max-Lindgren]

I'm trying to compile Markdown and run it in my sveltekit client. I'm currently stuck on the problem that the run function throws the error: SyntaxError: Cannot use import statement outside a module. I have not found any posts from people having similar problems. But the documentation seems to imply that things should run using the svelte-jsx package.

Would be very grateful for any pointers!

Here's an example of a svelte file that gives me this error:

<script lang="ts">
  import { onMount } from "svelte";
  import { compile, run } from "@mdx-js/mdx";
  import * as jsxRuntime from "svelte-jsx/jsx-runtime";

  let compiled: string = "";

  const testCompile = async () => {
    try {
      compiled = String(
        await compile("#This is a title", {
          format: "md",
          jsxImportSource: "svelte-jsx",
          development: false,
        })
      );
    } catch (error) {
      console.log("failed to compile", error.message, error);
    }
  };

  let ran: any = undefined;

  const testRun = async () => {
    if (compiled) {
      console.log("Attempting to run compiled:", compiled);

      try {
        const { default: Component } = await run(compiled,
          jsxRuntime
        );
        ran = Component;
      } catch (error) {
        console.log("failed to run", error.message, error);
      }
    }
  };

  const test = async () => {
    await testCompile();
    await testRun();
  };

  onMount(test);
</script>

{"I want to render the component here eventually"}

[wooorm]

You are not compiling correctly. Please see the docs on how to compile and run things: https://mdxjs.com/packages/mdx/#runfunctionbody-options.

If you are compiling and running, use evaluate: https://mdxjs.com/packages/mdx/#evaluatefile-options.

[mnieber]

I'm also having problems with run and runSync, and I'm going to switch to using import 'foo.mdx because - although it doesn't fit my use-case as well - this works out of the box. I just wonder why it seems to be so much harder to use run than it is to use import. Syntactically the following cases are very simiar:

const Component1 = import("foo.mdx");
const Component2 = run("# Welcome to Foo");

But in terms of effort (from the user perspective), these cases seem to be far apart. Is this because import can build on the infrastructure provided by the bundler?

[wooorm]

I have no clue what code or tools you use so I can’t come up with a solution to your problem.

But, perhaps indeed, it is good to think of an example: how do you run the code in a file example.js, and how do you run the code "alert('1!')"? They’re completely different.

It’s not difficult to solve, I just have no clue what you are doing. See https://mdxjs.com/community/support/