Cannot use import statement outside a module

[pcheng17]

Hey there! I'm working on a side project that involves rendering math when a friend of mine shared this repository with me, and thought that I'd give it a go in my project. I installed using pnpm, switched out my katex.render calls with wypst.render, hoping things to just magically work, but I'm running into this error. It could just be a skill issue on my part since I'm new to web dev in general, but if you have any idea what might be going on, that would be awesome.

[0xpapercut]

Can you share the repo so I can take a look?

[pcheng17]

Let me try and whip up a minimal repro case...

[pcheng17]

Here is a minimal repro: https://github.com/pcheng17/wypst-test-app

All of the code can be found in src/routes/+page.svelte

[0xpapercut]

I have not tried to use it with vite, but you can take a look at this as reference. wypst-demo and obsidian-wypst could also help.

In particular, you first have to import like this:

import wypst from 'wypst';

and then you have to initialise it:

wypst.init();
// wypst can now be used in place of katex
wypst.renderToString('x + y');

If all goes well with the imports, but it doesn't work, it probably means that wypst.init is not working as intended, as it doesn't know where to search for the wasm source. If this is the case, reference obsidian-wypst for a solution.

[pcheng17]

Thanks for pointing out that I need to first initialize wypst! Didn't realize that.

However, the error I'm running into isn't because of a missing wypst.init(). It's actually from my import wypst from 'wypst'; line. Even if I don't use wypst at all and just try and import it, I run into the error. The moment I remove the import line, everything runs fine again.

But it seems like in all your demos, you can import wypst from 'wypst'; just fine...

Edit: I've made my repro case even more minimal to reflect what I was just describing, see here.

[0xpapercut]

Yea the problem is on my side. I'll fix it this weekend.

[pcheng17]

Thank you for taking a look into this! Let me know if I can help test.

[0xpapercut]

Hello,

I have not forgotten this issue. I tried to change the configuration of the library but the solution does not seem to be as straightforward as I thought.

The biggest holdup right now for me is time. I work on this project on my free time, but right now I don't have much free time at all. I'm very sorry, I wish I could split myself in half to continue working on this on a regular basis :).

Once my time frees up though, you can be sure I'll return to this.

I'm also looking forward to HTML native export for typst; I think that might come around sooner than we expect. Surely this year.

[0xpapercut]

I think I've figured out a way to minimise the complexity of the npm package. It might solve your problem, I'll share when possible.

[pcheng17]

Thanks so much for spending the time to look into this! I totally understand if you're busy with other things, so please prioritize that stuff first!

[0xpapercut]

Install the latest version of wypst (^0.0.8), and initialize it like this:

import { onMount } from 'svelte';
import wypst from 'wypst';
import wasm from 'wypst/dist/wypst.wasm?url';

onMount(() => {
  wypst.initialize(wasm).then(() => {
    console.log(wypst.renderToString("x + y")); // Check on console to see output
  });
});

This is special for vite. For regular usage, see the README, I've updated it.

[0xpapercut]

And by the way sorry for the wait, let me know if there are any problems.