Uncaught Error: Unexpected Usage loadForeignModule in errors.js

[calico-crusade]

Trying to use nuxt-monaco-editor in nuxt 3.4.2 is throwing a large number of errors in the console when interacting with anything associated with the editor (scrolling, typing, using context menus), however the editor seems to be working correctly?

Error Message:

Uncaught Error: Unexpected usage errors.js

loadForeignModule@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js?v=19554350:468:31
_getForeignProxy/this._foreignProxy<@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/browser/services/webWorker.js?v=19554350:38:30
promise callback*_getForeignProxy@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/browser/services/webWorker.js?v=19554350:36:51
getProxy@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/browser/services/webWorker.js?v=19554350:60:21
_getClient/this._client<@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:88:35
_getClient@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:89:9
getLanguageServiceWorker@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:94:31
worker@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:1088:19
_doValidate@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:367:31
maybeValidate@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:302:16
onModelAdd@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:327:7
DiagnosticsAdapter/<@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:358:80
DiagnosticsAdapter@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:358:51
registerProviders@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:1131:22
setupMode@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:1134:3
setupJavaScript@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js?v=19554350:1064:22
@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/monaco.contribution.js?v=19554350:270:40
promise callback*@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/language/typescript/monaco.contribution.js?v=19554350:270:20
onLanguage/disposable<@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/standalone/browser/standaloneLanguages.js?v=19554350:59:13
invoke@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/base/common/event.js?v=19554350:601:23
deliver@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/base/common/event.js?v=19554350:782:34
fire@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/base/common/event.js?v=19554350:747:33
requestRichLanguageFeatures@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/common/services/languageService.js?v=19554350:75:52
TextModel@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/common/model/textModel.js?v=19554350:208:31
_createModelData@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/common/services/modelService.js?v=19554350:262:23
createModel@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/common/services/modelService.js?v=19554350:303:30
doCreateModel@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/standalone/browser/standaloneCodeEditor.js?v=19554350:320:25
createTextModel@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/standalone/browser/standaloneCodeEditor.js?v=19554350:314:12
createModel@http://localhost:5000/_nuxt/node_modules/monaco-editor/esm/vs/editor/standalone/browser/standaloneEditor.js?v=19554350:190:12

Component:

<template>
    <ClientOnly>
        <MonacoEditor class="editor" v-model="code" @load="setEditor" lang="javascript" :options="{ theme: 'vs-dark' }" />
    </ClientOnly>
</template>

<script setup lang="ts">
import * as Monaco from 'monaco-editor'
type Editor = Monaco.editor.IStandaloneCodeEditor;

interface Props {
    modelValue: string;
    typings?: string;
}

interface Emits {
    (e: 'update:modelValue', value: string): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();
let editor: Editor | undefined = undefined;
let library: Monaco.IDisposable | undefined = undefined;
let model: Monaco.editor.ITextModel | undefined = undefined;
const typingUri = 'ts:runner/runner.d.ts';

const code = computed({
    get() { return props.modelValue; },
    set(value: string) { emit('update:modelValue', value); }
});

const resolveTypings = () => {
    library?.dispose();
    model?.dispose();

    if (!editor || !props.typings) return;
    //library = Monaco.languages.typescript.javascriptDefaults.addExtraLib(props.typings, typingUri);
    //model = Monaco.editor.createModel(props.typings, 'typescript', Monaco.Uri.parse(typingUri));
};

const setEditor = (e: Editor) => { editor = e; resolveTypings(); };

watch(() => props.typings, () => resolveTypings());
</script>

I have the nuxt-monaco-editor in the modules: [] in nuxt.config.ts

[e-chan1007]

I couldn't reproduce it with monaco-editor@0.38.0, nuxt@3.4.2(also 3.4.3) and nuxt-monaco-editor@1.2.2. Try to remove cache and update all the dependencies: rebuild node_modules and any lock files.

[hugoaboud]

I'm having the same issue, tried different combinations of versions, including the ones suggested by @e-chan1007.

Here's a minimal reproduction, you can see the errors on the browser inspector (for some reason not on the codesandbox inspector): https://codesandbox.io/p/sandbox/immutable-leftpad-gfspmd

The issue happens on Firefox 111.0.1 (64-bit), but not on Chrome 114.0.5735.106 (Official Build) (64-bit).

Could not create web worker(s). Falling back to loading web worker code in main thread, which might cause UI freezes. Please see https://github.com/microsoft/monaco-editor#faq [index.js:8:6487](https://codesandbox.io/p/chrome-devtool/protocol/index.js)
SyntaxError: import declarations may only appear at top level of a module 2 [index.js:8:6487](https://codesandbox.io/p/chrome-devtool/protocol/index.js)
SyntaxError: import declarations may only appear at top level of a module [editor.worker.js:5](https://gfspmd-3000.csb.app/node_modules/monaco-editor/esm/vs/editor/editor.worker.js?worker)
SyntaxError: import declarations may only appear at top level of a module 2 [index.js:8:6487](https://codesandbox.io/p/chrome-devtool/protocol/index.js)
SyntaxError: import declarations may only appear at top level of a module [ts.worker.js:15](https://gfspmd-3000.csb.app/node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js?worker)
Uncaught Error: Unexpected usage

loadForeignModule@https://gfspmd-3000.csb.app/_nuxt/node_modules/.pnpm/monaco-editor@0.36.1/node_modules/monaco-editor/esm/vs/editor/common/services

[e-chan1007]

Firefox 111 is 7 versions behind of the latest version 118. Firefox 114 is the first version to support the ES module on web workers, so you need to upgrade the browser to at least that version.

According to Can I use, over 90% of browsers support worker modules, so I have no plans to do anything in nuxt-monaco-editor. If you need to support older versions of browsers, some polyfills of worker module might help you.