Import error when using in NextJS

[Abhimanyu-Jha]

SyntaxError: Cannot use import statement outside a module at node_modules/mathbox/src/index.js (10)

Hey, trying to run setup this library for use. I've yarn added

1. "mathbox-react": "^0.0.11-rc",
2. "mathbox": "2.0.0",
3. "three": "^0.148.0",

The page seems to open to this error in the mathbox module. Are there any fixes/ workarounds for this?

[ChristopherChudzicki]

Are you using any sort of bundler? (Webpack, vite,...). I would not expect ES Modules (import / export syntax) to work well without a bundler.¹.

I would recommend using vite..

Footnotes

1. It is possible to use ESM in <script> tags with module attribute, but it doesn't generally work well (yet) because ESM doesn't support bare name imports. ↩

[Abhimanyu-Jha]

Hey, Yes i am actually using Next JS and I believe it uses webpack 5 as the default

[ChristopherChudzicki]

Do you have a repository you can share? I’ve never used NextJS but I’m happy to try and look into it. (Might take me a few days to find the time)

[Abhimanyu-Jha]

Yeah, I've shared the private repository with you. You can find the relevant code under ./pages/mideo-3.js.
Thanks!

[ChristopherChudzicki]

@Abhimanyu-Jha Everything seemed to work fine for me after yarn install and yarn dev:

[Abhimanyu-Jha]

Yeah, but after you refresh the page, or make any changes in the file and save the file, it it shows the error and there's no way to remove it.

[ChristopherChudzicki]

Yeah, but after you refresh the page, or make any changes in the file and save the file, it it shows the error and there's no way to remove it.

My experience was that:

• loading localhost:3000 and navigating to localhost:3000/mideo-3 always works correctly, even after reloading and saving; this includes hot-reloads where the page automatically reloads when you change source content
• localhost:3000/mideo-3 directly (or refreshing on that page) did not work

As mentioned, I am not a next-js expert, but comments like this make me wonder if this is related to SSR in NextJS. My understanding is that when loading localhost:3000/mideo-3, NextJS tries to render that page on the server before serving it to you. It seems reasonable to me that mathbox wouldn't work great with SSR since it relies on a bunch of browser APIs.

[Abhimanyu-Jha]

Thanks for the help, this works as expected in vite 👌🏻