Failed to resolve import "#build/components"

[garbit]

Hi there,

I'm trying to apply typing to my MonacoDiffEditor ref. To import the typing I'm using:

<script setup lang="ts">
import type * as Monaco from 'monaco-editor'
import { MonacoDiffEditor } from '#build/components'

const editorRef = ref<InstanceType<typeof MonacoDiffEditor>>()
const markdownContent = ref('test')
const changedMarkdownContent = ref('test changes')

const OPTIONS: Monaco.editor.IDiffEditorConstructionOptions = {
  diffWordWrap: 'on',
  automaticLayout: true,
}

</script>

<template>
<MonacoDiffEditor
        ref="editorRef"
        v-model="changedMarkdownContent"
        :original="markdownContent"
        :options="OPTIONS"
        lang="markdown"
        :style="{
          height: '100%',
          width: '100%',
        }"
      />
</template>

I can view the typings holding ctrl + click on the #build/components import however nuxt continues to show this error message:

[plugin:vite:import-analysis] Failed to resolve import "#build/components" from "pages/diff.vue". Does the file exist?

/Users/andy/development/kinnu/core2-mirror/trinity-web/pages/diff.vue:6:33

1  |  import { ref, computed } from 'vue';
2  |  import { defineComponent as _defineComponent } from "vue";
3  |  import { MonacoDiffEditor } from "#build/components";

nuxt.config.ts

export default defineNuxtConfig({
 modules: ['nuxt-monaco-editor'],
 monacoEditor: {
    // These are default values:
    locale: 'en',
    componentName: {
      codeEditor: 'MonacoEditor',
      diffEditor: 'MonacoDiffEditor',
    },
  },
})

Does anyone know why this is happening?

I'm trying to access the number of changes in the diff (see here: https://stackoverflow.com/a/61466242/276220 using: editorRef.value.$editor.getLineChanges()

[e-chan1007]

The example in the document seems to be outdated and I have updated it a while ago. Please try to import from #components instead of #build/components.

import { MonacoDiffEditor } from '#components'