e-chan1007 / nuxt-monaco-editor

Integrate monaco-editor with Nuxt
https://e-chan1007.github.io/nuxt-monaco-editor
MIT License
119 stars 16 forks source link

pnpm: No match found for location with path "/_monaco/vs/loader.js" #11

Closed Thy3634 closed 2 years ago

Thy3634 commented 2 years ago
<script setup>
const editorRef = ref()
onMounted(() => {
    console.log(editorRef.value)
})
</script>
<template>
<MonacoEditor ref="editorRef" />
</template>

got this:

Proxy {$editor: undefined, __v_skip: true}
e-chan1007 commented 2 years ago

I released the new version and this error should be fixed successfully. Now editorRef.value.$editor is a ref instance of the editor (ref is automatically unwrapped by Vue). The document will also be fixed soon.

Thy3634 commented 2 years ago

@1.0.4 / @1.0.3 Not fixed😕 And got this: [Vue Router warn]: No match found for location with path "/_monaco/vs/loader.js" witch block the app

Gruce commented 2 years ago

@Thy3634 Try to remove node_modules. Because it works with me.

e-chan1007 commented 2 years ago

When onMounted is called, the editor hasn't been loaded yet, so editorRef might be undefined then. After loading is completed, it should be the instance of the editor.

However, it was difficult to detect whether the editor loaded. Therefore I added the event load in v1.0.5. The following code should work in this version:

<script setup>
const onEditorLoaded = (editor) => {
  // `editor` is available!
}
</script>

<MonacoEditor @load="onEditorLoaded" />
Thy3634 commented 2 years ago

No need to do that, vue mount child component first. and the monaco.editor.create is sync function

I still blocked by this error [Vue Router warn]: No match found for location with path "/_monaco/vs/loader.js".

I removed pnpm store, and run nuxi cleanup, then reinstall.

I'll try reinstall node.

e-chan1007 commented 2 years ago

I'm sorry. I was misunderstanding what the cause was and lacked in checking carefully.

I created a clean project and checked, found editorRef is not undefined since v1.0.4.


I tried using pnpm in the following way:

pnpm dlx nuxi init nuxt-app
pnpm install --shamefully-hoist
pnpm add -D monaco-editor nuxt-monaco-editor
# add 'nuxt-monaco-editor' to `nuxt.config.ts` and your code to `app.vue`
pnpm run dev -o

I couldn't see [Vue Router warn] then (also with npm or yarn.)

Could you tell me more details about the config, please?

Thy3634 commented 2 years ago

It's a version mismatching mistake. I updated nuxt, OK now.

Thank you for your attention.