monacoEditorPlugin is not a function

[7y1o]

Hello everyone I suffered for a very long time with monaco editor on SvelteKit, after which I came across this plugin. I was very happy, I did everything according to the points described in the README, but at startup I received the following error, after which the Vite process ended:

monacoEditorPlugin is not a function
TypeError: monacoEditorPlugin is not a function
    at file:///C:/Users/<name>/PhpstormProjects/<proj>/svelte.config.js:19:5
    at ModuleJob.run (node:internal/modules/esm/module_job:183:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
    at async load_config (file:///C:/Users/<name>/PhpstormProjects/<proj>/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.202_sass@1.42.1+svelte@3.44.0/node_modules/@sveltejs/kit/dist/cli.js:702:17)
    at async get_config (file:///C:/Users/<name>/PhpstormProjects/<proj>/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.202_sass@1.42.1+svelte@3.44.0/node_modules/@sveltejs/kit/dist/cli.js:774:10)
    at async file:///C:/Users/<name>/PhpstormProjects/<proj>/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.202_sass@1.42.1+svelte@3.44.0/node_modules/@sveltejs/kit/dist/cli.js:836:18
 ELIFECYCLE  Command failed with exit code 1.

If you do not specify monacoEditorPlugin as a function (with parentheses), then Vite starts, but the following error crashes in the console:

jsonMode.js:1412 Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:460)
    at webWorker.js:38

Thank you in advance for your help

[NomadBin]

Hello everyone I suffered for a very long time with monaco editor on SvelteKit, after which I came across this plugin. I was very happy, I did everything according to the points described in the README, but at startup I received the following error, after which the Vite process ended:

monacoEditorPlugin is not a function
TypeError: monacoEditorPlugin is not a function
    at file:///C:/Users/<name>/PhpstormProjects/<proj>/svelte.config.js:19:5
    at ModuleJob.run (node:internal/modules/esm/module_job:183:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
    at async load_config (file:///C:/Users/<name>/PhpstormProjects/<proj>/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.202_sass@1.42.1+svelte@3.44.0/node_modules/@sveltejs/kit/dist/cli.js:702:17)
    at async get_config (file:///C:/Users/<name>/PhpstormProjects/<proj>/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.202_sass@1.42.1+svelte@3.44.0/node_modules/@sveltejs/kit/dist/cli.js:774:10)
    at async file:///C:/Users/<name>/PhpstormProjects/<proj>/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.202_sass@1.42.1+svelte@3.44.0/node_modules/@sveltejs/kit/dist/cli.js:836:18
 ELIFECYCLE  Command failed with exit code 1.

If you do not specify monacoEditorPlugin as a function (with parentheses), then Vite starts, but the following error crashes in the console:

jsonMode.js:1412 Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:460)
    at webWorker.js:38

Thank you in advance for your help

hello, I’d be grateful if you could provide the error github responsitory

[SaltyAom]

I also got this problem but solved.

Using vite 2.7.2. For me, the module doesn't auto resolve to default for some reason so I simply solved by adding .default after import the module.

Here's my snippet:

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import monacoEditorPlugin from 'vite-plugin-monaco-editor'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        svelte(),
        monacoEditorPlugin.default({
            languageWorkers: ['json', 'editorWorkerService'],
            customWorkers: [
                {
                    label: 'graphql',
                    entry: 'monaco-graphql/dist/graphql.worker'
                }
            ]
        })
    ],
    clearScreen: false
})

[Adol1111]

Should replace export default with export =

In ECMAScript module, export default != module.exports, see https://github.com/microsoft/TypeScript/issues/7185

export default xxx

// equals
export const default = xxx

// after compile
exports.default = xxx

export = xxx
// after compile
exports = xxx

Can you add a new export

export { monacoEditorPlugin };

[cfuendev]

@SaltyAom Thanks a lot, monacoEditorPlugin.default and specifying workers did the trick for me. Trying the vite config shown in the readme with no changes both in a basic Stackblitz Vanilla Vite setup and locally (Windows 10) gave me:

failed to load config from /home/projects/vitejs-vite-3d3be4/vite.config.js
error when starting dev server:
Error: _file_home_projects_vitejs_vite_3d3be4_node_modules_vite_plugin_monaco_editor_dist_index_js.default is not a function
    at file:///home/projects/vitejs-vite-3d3be4/vite.config.js.timestamp-1675275437570.mjs
    at async resolveConfig (file://file:///home/projects/vitejs-vite-3d3be4/node_modules/vite/dist/node/chunks/dep-b6b8dfbf.js:61850:28)
    at async createServer (file://file:///home/projects/vitejs-vite-3d3be4/node_modules/vite/dist/node/chunks/dep-b6b8dfbf.js:61169:20)
    at async CAC.eval (file://file:///home/projects/vitejs-vite-3d3be4/node_modules/vite/dist/node/cli.js:749:24)

[skalidindi]

@china-bin

This happens when you set the type field as type: "module" in package.json.

The .default trick works but would love a proper fix to this.

See https://github.com/skalidindi/VitePlayground/tree/monaco for repro

[Moros1138]

The .default trick seems to be work fine in javascript, however in typescript i get this annoying error.

Property 'default' does not exist on type '(options: IMonacoEditorOpts) => Plugin_2'.

I'm not skilled enough to diagnose the reason i'm getting it, but I did manage to silence the error by casting it to any, like so:

...
plugins: [
    (monacoEditorPlugin as any).default()
],
...

[enoy19]

The .default trick seems to be work fine in javascript, however in typescript i get this annoying error.

Property 'default' does not exist on type '(options: IMonacoEditorOpts) => Plugin_2'.

I'm not skilled enough to diagnose the reason i'm getting it, but I did manage to silence the error by casting it to any, like so:

...
plugins: [
    (monacoEditorPlugin as any).default()
],
...

...
import monacoEditorPlugin, { type IMonacoEditorOpts } from 'vite-plugin-monaco-editor';
...

const monacoEditorPluginDefault = ((monacoEditorPlugin as any).default) as (options: IMonacoEditorOpts) => any;

...
  plugins: [
    monacoEditorPluginDefault({
      languageWorkers: ['typescript', 'editorWorkerService'],
      customWorkers: [
        {
          label: 'graphql',
          entry: 'monaco-graphql/dist/graphql.worker',
        },
      ],
...

declaring const monacoEditorPluginDefault = ((monacoEditorPlugin as any).default) as (options: IMonacoEditorOpts) => any; and using it as the plugin will provide code completion.

[pedrolamas]

From what I can see, PR #45 provided by @AkaraChen is the best solution for this problem as it brings the plugin to modern standards.

@china-bin any chance of getting that PR reviewed and if everything is ok, merged?

---

In the meantime, this is my solution which I believe to be fully TypeScript safe and does not use any:

import monacoEditorPluginModule from 'vite-plugin-monaco-editor'

const isObjectWithDefaultFunction = (module: unknown): module is { default: typeof monacoEditorPluginModule } => (
  module != null &&
  typeof module === 'object' &&
  'default' in module &&
  typeof module.default === 'function'
)

const monacoEditorPlugin = isObjectWithDefaultFunction(monacoEditorPluginModule)
  ? monacoEditorPluginModule.default
  : monacoEditorPluginModule

export default defineConfig({
  plugins: [
    monacoEditorPlugin({})
  ]
})

[bildungsroman]

I'm having the same issue since updating to vite 5. @pedrolamas your solution is the only one that works for me, but it would be great to get that PR merged to have it properly exported.

[mirismaili]

(monacoEditorPlugin as unknown as {default: typeof monacoEditorPlugin}).default({
  languageWorkers: ['json', 'editorWorkerService'],
  customWorkers: [/* ... */],
}),

Unfortunately! 😢