Unable to integrate with monaco-yaml successfully #3820
Comments
|
add following to your vite.config.ts |
|
@dejour Thank you very much, it's working now! But why and what is happening? How can I understand and know to add these configs by myself? |
|
Did you solve it? I have seen your repository, but the version is 2.5.1. I tried monaco-yaml 3.2.1 and vite and the problem still occurs. (only when i use
Uncaught Error: Unexpected usage
Error: Unexpected usage
at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:450)
at webWorker.js:38 |
|
I got it working in remcohaszing/monaco-yaml#116. |
|
@remcohaszing Can you try to import It seems not working for me when upgrading to
export const setupMonaco = async () => {
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (window.monaco) {
return window.monaco
}
const [{ default: EditorWorker }, { default: YamlWorker }] =
await Promise.all([
import('monaco-editor/esm/vs/editor/editor.worker?worker'),
import('monaco-yaml/lib/esm/yaml.worker?worker'),
])
window.MonacoEnvironment = {
globalAPI: true,
getWorker(_: string, label: string) {
if (label === 'yaml') {
return new YamlWorker()
}
return new EditorWorker()
},
}
const monaco = await import('monaco-editor/esm/vs/editor/edcore.main')
window.monaco = monaco
const [, { setDiagnosticsOptions }] = await Promise.all([
import('monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution'),
import('monaco-yaml'),
])
setDiagnosticsOptions({
enableSchemaRequest: true,
format: true,
validate: true,
})
return monaco
} |
|
@remcohaszing I upgraded all deps at JounQin/test@bab5eaa for reproduction. |
|
I suspect you’re running into this. You can probably try something like this: // Load monaco-editor and all cherry-picked features.
// This way all monaco features are available in the same chunk and only a single monaco module is loaded.
// See https://github.com/microsoft/monaco-editor/blob/main/monaco-editor-samples/browser-esm-webpack-small/index.js
import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution'
// Expose the editor API
export { editor } from 'monaco-editor/esm/vs/editor/editor.api'
// Expose monaco-yaml
export { setDiagnosticsOptions } from 'monaco-yaml'// Load workers.
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import YamlWorker from 'monaco-yaml/lib/esm/yaml.worker?worker'
window.MonacoEnvironment = {
getWorker(moduleId, label) {
switch (label) {
case 'editorWorkerService':
return new EditorWorker()
case 'yaml':
return new YamlWorker()
default:
throw new Error(`Unknown label ${label}`)
}
},
}
export async function setupMonaco() {
const { editor, setDiagnosticsOptions } = await import('./my-monaco')
// Configure monaco editor.
} |
|
@remcohaszing I want to load all monaco related deps lazily including worker, and did you try my reproduction? |
|
I've tested this in Vite 2.8.6 and the repro seems to be working fine, so it looks like this is fixed now. Closing this, but if there's still an issue with it, feel free to let us know with an updated repro. |
Describe the bug
I don't understand what does this mean.
Reproduction
You can check https://github.com/JounQin/test/tree/monaco-yaml
Just run
yarn devSystem Info
Output of
npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:Used package manager: yarn
Logs
Before submitting the issue, please make sure you do the following
The webpack version works just fine.
https://github.com/JounQin/test/tree/monaco-editor
related remcohaszing/monaco-yaml#53
I don't know if it is related to vite or monaco-yaml itself for now. But it is very strange that when I change
node_modules/monaco-yaml/lib/esm/yaml.worker.jsfor debugging, no changes is working, logs for example. So I raise this issue for tracking.The text was updated successfully, but these errors were encountered: