monaco-editor Cannot use import statement outside a module

[manuganji]

500
Cannot use import statement outside a module
/Users/../node_modules/monaco-editor/esm/vs/editor/editor.main.js:1
import '../language/typescript/monaco.contribution';
^^^^^^

I'm trying to use monaco-editor like here: https://github.com/caap-store/db-reflector/blob/run-query/src/lib/editor/Monaco.svelte and it throws this error on first load. On refresh, it goes away.

Also npm run preview after npm run build fails with the error

Error [ERR_MODULE_NOT_FOUND]: Cannot find package '/Users/../node_modules/monaco-editor/' imported from /Users/../.svelte-kit/output/server/entries/pages/runQuery.svelte.js
at legacyMainResolve (internal/modules/esm/resolve.js:225:9)
at packageResolve (internal/modules/esm/resolve.js:648:14)
at moduleResolve (internal/modules/esm/resolve.js:696:18)
at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:810:11)
at Loader.resolve (internal/modules/esm/loader.js:85:40)
at Loader.getModuleJob (internal/modules/esm/loader.js:229:28)
at ModuleWrap. (internal/modules/esm/module_job.js:51:40)
at link (internal/modules/esm/module_job.js:50:36)

EDIT: An isolated test is at https://github.com/manuganji/svelte-monaco-test/blob/main/src/lib/editor/Monaco.svelte

[manuganji]

I'm following the steps here: https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md#using-vite

[benmccann]

It might help to make a reproducible example which does not rely on having a Postgres database running to make it easier for people to look at it and give suggestions

[manuganji]

Sure, sorry for not doing that earlier.

[manuganji]

An isolated test is at https://github.com/manuganji/svelte-monaco-test/blob/main/src/lib/editor/Monaco.svelte

[bluwy]

Sounds like a bundling error on monaco-editor's part as it's module entrypoint is an ESM .js file, but the package.json isn't type: module. But at the same time, monaco-editor is browser-only, and it should be used in onMount, which would bypass the issue.

[shaun-wild]

Please can you elaborate on this? Putting the code inside onMount didn't make a difference as the import is still top-level.

[benmccann]

You can do a dynamic import inside onMount. See the FAQ for an example

[shaun-wild]

Got it - thanks @benmccann .

[SheldonParsons]

You can do a dynamic import inside onMount. See the FAQ for an example

thanks！

[davidfitzgibbon]

You can do a dynamic import inside onMount. See the FAQ for an example

For anyone looking for the specific FAQ entry, it's here https://kit.svelte.dev/faq#how-do-i-use-a-client-side-only-library-that-depends-on-document-or-window