Code behind if (browser) check is included in server bundle and fails
#1534
Comments
|
wrap it in an |
|
The package is imported inside <script>
import { onMount } from "svelte";
import { browser } from "$app/env";
let divEl;
onMount(async () => {
if (browser) {
const Monaco = await import("monaco-editor");
const jsonWorker = await import(
"monaco-editor/esm/vs/language/json/json.worker?worker"
).then((res) => res.default);
self.MonacoEnvironment = {
getWorker: function () {
return new jsonWorker();
},
};
const editor = Monaco.editor.create(divEl, {
value: JSON.stringify(
{
something: 123,
},
null,
"\t"
),
language: "json",
automaticLayout: true,
});
return () => {
editor.dispose();
};
}
});
</script>
<div bind:this={divEl} /> |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
benmccann
changed the title
if (browser) check is included in server bundle and fails
|
Hmm, it does look like there might be a packaging bug here. The interesting thing is that even when I wrap the Monaco usage in an |
|
I checked this out a bit more and SvelteKit's esbuild packaging isn't getting called in this pathway, so the packaging bug has to be in Vite. Since the bug looks to reside in Vite, I'm going to go ahead and close this. I'd recommend you file an issue over in the Vite repo |
|
Will do, thanks for looking into this further. |
|
So the offending line here is the Re: SvelteKit's esbuild packaging not being called - vite bundles the build with rollup right? So it shouldn't be getting called anyway? |
|
Using final result: <script>
import { onMount } from "svelte";
import { browser } from "$app/env";
import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker&inline";
let divEl;
if (browser) {
onMount(async () => {
const Monaco = await import("monaco-editor");
self.MonacoEnvironment = {
getWorker: function () {
return new jsonWorker();
},
};
const editor = Monaco.editor.create(divEl, {
value: JSON.stringify(
{
something: 123,
},
null,
"\t"
),
language: "json",
automaticLayout: true,
});
return () => {
editor.dispose();
};
});
}
</script> |
Describe the bug
When importing the
monaco-editorpackage, SvelteKit fails to build with both node and static adapters. It works in dev, and the module is imported dynamically in anonMount.Logs
When running
svelte-kit build, it ends with:see Stacktraces for the full build output.
To Reproduce
I've created a reproduction repo here: https://github.com/mattjennings/sveltekit-monaco-bug
Simply try building the project to reproduce. If you go to
routes/index.svelteand uncomment theonMountblock, the build will succeed.You'll also notice the
self.MonacoEnvironment = ...assignment in there, but that is not related to the error.Expected behavior
It seems like dynamic imports in
onMountare still being included in the server build? I had expected that anything imported in onMount would be kept separate (and that the build would succeed).Stacktraces
Full build output:
Stack trace
Information about your SvelteKit Installation:
Diagnostics
System:
OS: macOS 11.3.1
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 42.08 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.2.0 - ~/.nvm/versions/node/v16.2.0/bin/node
npm: 7.13.0 - ~/.nvm/versions/node/v16.2.0/bin/npm
Browsers:
Brave Browser: 90.1.24.82
Chrome: 90.0.4430.212
Safari: 14.1
Safari Technology Preview: 14.2
npmPackages:
@sveltejs/kit: next => 1.0.0-next.109
svelte: ^3.34.0 => 3.38.2
Severity
I don't think it's an issue specific to monaco-editor, so I'd say it's a high severity.
Additional context
Someone using firebase with SvelteKit is running into the same error. Is there something in common between the two packages?
The text was updated successfully, but these errors were encountered: