[Bug] Test error: Package may have incorrect main/module/exports?

Reproducible in vscode.dev or in VS Code Desktop?

• Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• Not reproducible in the monaco editor playground

Monaco Editor Playground Link

No response

Monaco Editor Playground Code

Reproduction Steps

1. npm create vue@latest
2. Turn on typescript, and vitest (at the very least).
3. Create a simple EditorComponent.vue file inside the views directory.

<script setup lang="ts">
import { onMounted, ref, type Ref } from 'vue'
import * as monaco from 'monaco-editor'

const editorContainer: Ref<HTMLElement | null> = ref(null)

onMounted(() => {
  if (editorContainer.value) {
    monaco.editor.create(editorContainer.value, {
      value: '// Start coding here!',
      language: 'javascript',
      theme: 'vs-dark',
    })
  }
})
</script>

<template>
  <div ref="editorContainer" style="height: 400px"></div>
</template>

Add this to your router index file:

 path: '/monaco',
      name: 'monaco',
      component: () => import('../views/EditorComponent.vue'),
    },

Create the following test file:

// EditorComponent.spec.ts
import { mount } from '@vue/test-utils'
import EditorComponent from '@/views/EditorComponent.vue'
import { editor } from 'monaco-editor'
import { describe, expect, it, vi } from 'vitest'

vi.mock('monaco-editor', () => ({
  editor: {
    create: vi.fn(),
  },
}))

describe('EditorComponent.vue', () => {
  it('renders the editor container', () => {
    const wrapper = mount(EditorComponent)
    expect(wrapper.find('div[ref="editorContainer"]').exists()).toBe(true)
  })

  it('calls monaco.editor.create on mount', () => {
    mount(EditorComponent)
    expect(editor.create).toHaveBeenCalled()
  })

  it('passes the correct parameters to monaco.editor.create', () => {
    const wrapper = mount(EditorComponent)
    const editorContainer = wrapper.find('div[ref="editorContainer"]').element as HTMLElement
    expect(editor.create).toHaveBeenCalledWith(editorContainer, {
      value: '// Start coding here!',
      language: 'javascript',
      theme: 'vs-dark',
    })
  })
})

Run tests in your VSCode terminal:
npx vitest --coverage

Actual (Problematic) Behavior

Test failure.

FAIL src/components/EditorComponent.test.ts [ src/components/EditorComponent.test.ts ]
Error: Failed to resolve entry for package "monaco-editor". The package may have incorrect main/module/exports specified in its package.json.
Plugin: vite:import-analysis
File: /Users/bill/Documents/CODE/vue-monaco-test/src/components/EditorComponent.test.ts:4:0
6 | const vi_import_0 = await import("@vue/test-utils");
7 | const vi_import_1 = await import("@/components/EditorComponent.vue");
8 | const vi_import_2 = await import("monaco-editor");
| ^
9 |
10 |

Expected Behavior

Successful test. This is even keeping us from mocking the test out.
(unless we're doing something REALLY wrong ... if so, I'll take the hit, lol)

Additional Context

No response

Reproduce the failure with the Vue/TypeScript setup and run npx vitest --coverage, starting from EditorComponent.spec.ts and the monaco-editor package.json entry fields. Check why Vite cannot resolve the package before the mock is applied; done means the shown tests run successfully with monaco-editor mocked.