Error: path3.basename is not a function

[Matasx]

Hello,
I have integrated this library to my Nuxt3/Vue3 Vite project.
Everything seems to be working correctly and the website is able to load my schema and show the editor.
However when I hover over some of the errors inside the editor, following error shows in browser console (browser dev tools).

TypeError: path3.basename is not a function
    at getSchemaName (yaml.worker.js?type=module&worker_file:6729:20)
    at yaml.worker.js?type=module&worker_file:6716:12
    at errors.js:15:27

And this is the offending code from the yaml.worker.js:

function getSchemaName(schema) {
    let result = "JSON Schema";
    const urlString = schema.url;
    if (urlString) {
        const url = URI5.parse(urlString);
        result = path3.basename(url.fsPath); //<-- here is the problem
    } else if (schema.title) {
        result = schema.title;
    }
    return result;
}

It looks like it can display hints for errors, but when I hover over a field, I don't get any intellisense information about the description etc.
I'm wondering if I'm doing anything wrong.

My setup:
package.json:

"dependencies": {
"monaco-yaml": "^5.1.0",
...
}

nuxt.config.js:

export default defineNuxtConfig({
  vite: {
    optimizeDeps: {
      include: [
        'monaco-editor/esm/vs/editor/editor.worker?worker',
        'monaco-yaml/yaml.worker?worker'
      ]
    }
...
}

test.vue:

<template>
  <code-editor v-model="code"></code-editor>
  {{ code }}
</template>

<script setup>

const code = ref('')

</script>

components/CodeEditor.vue:

<template>
  <v-container>
    <div ref="codeEditorBox" style="height: 500px;"></div>
  </v-container>
</template>

<script setup>
import * as monaco from 'monaco-editor'
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import YamlWorker from 'monaco-yaml/yaml.worker?worker'
import { configureMonacoYaml } from 'monaco-yaml'

const codeEditorBox = ref(null)
let editor = null
const filename = monaco.Uri.parse('file:///.strategy.yaml')

self.MonacoEnvironment = {
  getWorker(_, label) {
    switch (label) {
      case 'editorWorkerService':
        return new EditorWorker()
      case 'yaml':
        return new YamlWorker()
      default:
        throw new Error(`Unknown label ${label}`)
    }
  }
}

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue'])

watch(() => props.modelValue, newValue => {
  if (!editor) return
  const oldValue = editor.getValue()
  if (newValue !== oldValue) {
    editor.setValue(newValue)
  }
})

onMounted(() => {
  if (editor) return

  configureMonacoYaml(monaco, {
    enableSchemaRequest: true,
    schemas: [
      {
        fileMatch: ['*.strategy.yaml'],
        uri: '/schema/strategy.json'
      }
    ]
  })

  let model = monaco.editor.getModel(filename)

  if (!model) {
    model = monaco.editor.createModel(
      props.modelValue,
      undefined,
      filename
    )
  }

  editor = monaco.editor.create(codeEditorBox.value, {
    automaticLayout: true,
    model: model,
    theme: 'vs-dark'
  })

  editor.onDidChangeModelContent(() => {
    emit('update:modelValue', editor.getValue())
  })
})

</script>

And I have my schema defined under public/schema/strategy.json

Thank you in advance for your input.

[Matasx]

After some digging I was albe to resolve it, hope it helps somebody in the future.

nuxt.config.js:

export default defineNuxtConfig({
  vite: {
    optimizeDeps: {
      include: [
        'path-browserify'
      ]
    },
    resolve: {
      alias: {
        path: 'path-browserify'
      }
    }
...
}

[remcohaszing]

I don’t know what optimizeDeps does in Vite, but you shouldn’t need to specify the resolve alias.