monacoEditorPlugin is not a function #21

7y1o · 2021-12-23T10:37:32Z

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/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/dist/cli.js:702:17)
    at async get_config (file:///C:/Users/<name>/PhpstormProjects/<proj>/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/dist/cli.js:774:10)
    at async file:///C:/Users/<name>/PhpstormProjects/<proj>/node_modules/.pnpm/@[email protected][email protected][email protected]/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

The text was updated successfully, but these errors were encountered:

NomadBin · 2021-12-24T02:11:16Z

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/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/dist/cli.js:702:17)
    at async get_config (file:///C:/Users/<name>/PhpstormProjects/<proj>/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/dist/cli.js:774:10)
    at async file:///C:/Users/<name>/PhpstormProjects/<proj>/node_modules/.pnpm/@[email protected][email protected][email protected]/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 · 2021-12-28T13:21:20Z

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 · 2022-09-02T05:01:57Z

Should replace export default with export =

In ECMAScript module, export default != module.exports, see microsoft/TypeScript#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 · 2023-02-01T18:22:56Z

@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 · 2023-03-21T22:44:30Z

@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 · 2023-05-01T18:17:48Z

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 · 2023-05-12T23:29:04Z

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 · 2023-11-27T10:30:09Z

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 · 2023-12-12T22:20:41Z

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 · 2024-08-13T09:07:39Z

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

Unfortunately! 😢

faylite · 2024-11-22T14:45:57Z

Having the same issue, was able to resolve it using the "default" hack. Then applying a ts-ignore and specifying that the options are still IMonacoEditorOpts to get some intellisense still. I'm fine with this, although an upstream fix would be nice.

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

// @ts-ignore
monacoEditorPlugin.default({
  languageWorkers: ['editorWorkerService', 'json'],
  globalAPI: true,
  customWorkers: [
    {
      label: 'json',
      entry: 'monaco-editor/esm/vs/language/json/json.worker'
    },
  ],
} as IMonacoEditorOpts)

Adol1111 mentioned this issue Sep 2, 2022

fix: export default for monacoEditorPlugin #31

Closed

AkaraChen added a commit to AkaraChen/vite-plugin-monaco-editor that referenced this issue Jun 9, 2023

fix: issues vdesjs#21

7b54796

kkerti mentioned this issue Sep 4, 2023

Update dependencies for svelte@4 and vite@4 intechstudio/grid-editor#385

Merged

nickcarnival mentioned this issue Jul 1, 2024

使用cdn加载在electron中会触发CSP #55

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

monacoEditorPlugin is not a function #21

monacoEditorPlugin is not a function #21

7y1o commented Dec 23, 2021

NomadBin commented Dec 24, 2021

SaltyAom commented Dec 28, 2021 •

edited

Loading

Adol1111 commented Sep 2, 2022 •

edited

Loading

cfuendev commented Feb 1, 2023 •

edited

Loading

skalidindi commented Mar 21, 2023 •

edited

Loading

Moros1138 commented May 1, 2023

enoy19 commented May 12, 2023

pedrolamas commented Nov 27, 2023 •

edited

Loading

bildungsroman commented Dec 12, 2023

mirismaili commented Aug 13, 2024 •

edited

Loading

faylite commented Nov 22, 2024 •

edited

Loading

monacoEditorPlugin is not a function #21

monacoEditorPlugin is not a function #21

Comments

7y1o commented Dec 23, 2021

NomadBin commented Dec 24, 2021

SaltyAom commented Dec 28, 2021 • edited Loading

Adol1111 commented Sep 2, 2022 • edited Loading

cfuendev commented Feb 1, 2023 • edited Loading

skalidindi commented Mar 21, 2023 • edited Loading

Moros1138 commented May 1, 2023

enoy19 commented May 12, 2023

pedrolamas commented Nov 27, 2023 • edited Loading

bildungsroman commented Dec 12, 2023

mirismaili commented Aug 13, 2024 • edited Loading

faylite commented Nov 22, 2024 • edited Loading

SaltyAom commented Dec 28, 2021 •

edited

Loading

Adol1111 commented Sep 2, 2022 •

edited

Loading

cfuendev commented Feb 1, 2023 •

edited

Loading

skalidindi commented Mar 21, 2023 •

edited

Loading

pedrolamas commented Nov 27, 2023 •

edited

Loading

mirismaili commented Aug 13, 2024 •

edited

Loading

faylite commented Nov 22, 2024 •

edited

Loading