issue with v6.5.0 (There is already an extension with this id error) on inputFactories

[OliverwengFiltered]

After upgrading to the latest version, it builds successfully, but throws error on the run time. The console says (There is already an extension with this id error) on inputFactories.

it looks like the inputFactories got imported twice ?

appreciate any insights.

@kaisalmen @CGNonofr

[cdietrich]

Had the same problem with vite https://github.com/cdietrich/my-monaco-editor-react-example/commit/7f597fbe796ba336ed75bd73eb468437f32c14fd

[kaisalmen]

@OliverwengFiltered and @cdietrich thanks for reporting. We should add that this to our troubleshooting section.

[kaisalmen]

Done: https://github.com/TypeFox/monaco-languageclient#vite-dev-server-troubleshooting

[rajialtooro]

Had the same problem with vite cdietrich/my-monaco-editor-react-example@7f597fb

This problem is also happening in Nextjs, I'm not sure if Next has a dedupe feature yet any Idea on how to tackle it there ?

[CGNonofr]

I'm not sure it's required. it's required in the monaco-vscode-api demo because there is a local dependency

I think this is just a duplicated dependency issue here

[OliverwengFiltered]

@kaisalmen , the troubleshooting link only mention a recommendation for Vite. Anything recommendation for Webpack ?

[kaisalmen]

I think this is just a duplicated dependency issue here

@CGNonofr is probably right. When I remove the dedupe instruction here, it just works, because dependencies are clear (=no mismatching versions)

@OliverwengFiltered the webpack verification example works also fine: https://github.com/TypeFox/monaco-languageclient/tree/main/packages/verify/webpack

I will clarify the README.

[kaisalmen]

I will clarify the README.

Done ✅

[cdietrich]

wonder where the mismatching versions came from when i just had a dependency to monaco-editor-react

but i can see this locally:

dietrich@MBPvonChristian my-monaco-editor-react-example % head node_modules/vscode/package.json
{
  "name": "@codingame/monaco-vscode-api",
  "version": "1.82.3",
  "description": "VSCode public API plugged on the monaco editor",
  "keywords": [],
  "author": {
    "name": "CodinGame",
    "url": "http://www.codingame.com"
  },
  "license": "MIT",
dietrich@MBPvonChristian my-monaco-editor-react-example % head ./node_modules/monaco-languageclient/node_modules/vscode/package.json
{
  "name": "@codingame/monaco-vscode-api",
  "version": "1.82.2",
  "description": "VSCode public API plugged on the monaco editor",
  "keywords": [],
  "author": {
    "name": "CodinGame",
    "url": "http://www.codingame.com"
  },
  "license": "MIT",
dietrich@MBPvonChristian

[cdietrich]

vscode@1.82.3 peer
node_modules/vscode
  vscode@"npm:@codingame/monaco-vscode-api@1.82.3" from @codingame/monaco-vscode-configuration-service-override@1.82.3
  node_modules/@codingame/monaco-vscode-configuration-service-override
    @codingame/monaco-vscode-configuration-service-override@"~1.82.2" from monaco-editor-wrapper@3.2.2
    node_modules/monaco-editor-wrapper
      peer monaco-editor-wrapper@"~3.2.2" from @typefox/monaco-editor-react@2.2.2
      node_modules/@typefox/monaco-editor-react
        @typefox/monaco-editor-react@"^2.2.2" from the root project
  vscode@"npm:@codingame/monaco-vscode-api@1.82.3" from @codingame/monaco-vscode-languages-service-override@1.82.3
  node_modules/@codingame/monaco-vscode-languages-service-override
    @codingame/monaco-vscode-languages-service-override@"~1.82.2" from monaco-languageclient@6.5.0
    node_modules/monaco-languageclient
      monaco-languageclient@"~6.5.0" from monaco-editor-wrapper@3.2.2
      node_modules/monaco-editor-wrapper
        peer monaco-editor-wrapper@"~3.2.2" from @typefox/monaco-editor-react@2.2.2
        node_modules/@typefox/monaco-editor-react
          @typefox/monaco-editor-react@"^2.2.2" from the root project
  vscode@"npm:@codingame/monaco-vscode-api@1.82.3" from @codingame/monaco-vscode-model-service-override@1.82.3
  node_modules/@codingame/monaco-vscode-model-service-override
    @codingame/monaco-vscode-model-service-override@"~1.82.2" from monaco-languageclient@6.5.0
    node_modules/monaco-languageclient
      monaco-languageclient@"~6.5.0" from monaco-editor-wrapper@3.2.2
      node_modules/monaco-editor-wrapper
        peer monaco-editor-wrapper@"~3.2.2" from @typefox/monaco-editor-react@2.2.2
        node_modules/@typefox/monaco-editor-react
          @typefox/monaco-editor-react@"^2.2.2" from the root project

vscode@1.82.2 peer
node_modules/monaco-languageclient/node_modules/vscode
  vscode@"npm:@codingame/monaco-vscode-api@1.82.2" from monaco-languageclient@6.5.0
  node_modules/monaco-languageclient
    monaco-languageclient@"~6.5.0" from monaco-editor-wrapper@3.2.2
    node_modules/monaco-editor-wrapper
      peer monaco-editor-wrapper@"~3.2.2" from @typefox/monaco-editor-react@2.2.2
      node_modules/@typefox/monaco-editor-react
        @typefox/monaco-editor-react@"^2.2.2" from the root project

[rajialtooro]

I was able to make version 5.0.1 work with Nextjs using this webpack config

// next.config.js

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const { patchWebpackConfig } = require('next-global-css');

/** @type {import('next').NextConfig} */
let nextConfig = {
  swcMinify: true,
  experimental: {
    forceSwcTransforms: true,
  },
  transpilePackages: ['monaco-languageclient'],
  webpack(config, options) {
    // this fixes some issues with loading web workers
    config.output.publicPath = '/_next/';
    // because next.js doesn't like node_modules that import css files
    // this solves the issue for monaco-editor, which relies on importing css files
    patchWebpackConfig(config, options);

    // alias the inlined, vscode forked marked
    // implementation to the actual library
    config.resolve.alias['../common/marked/marked.js'] = 'marked';

    // adding monaco-editor to your bundle is slow as is,
    // no need to bundle it for the server in addition to the client
    if (!options.isServer) {
      config.plugins.push(
        // if you find yourself needing to override
        // MonacoEnvironment.getWorkerUrl or MonacoEnvironment.getWorker,
        // you probably just need to tweak configuration here.
        new MonacoWebpackPlugin({
          // you can add other languages here as needed
          languages: [
            'json',
            'css',
            'javascript',
            'typescript',
            'java',
            'python',
            'csharp',
          ],
          filename: 'static/[name].worker.js',
        })
      );
      // load monaco-editor provided ttf fonts
      config.module.rules.push({ test: /\.ttf$/, type: 'asset/resource' });
    }

    return config;
  },
};

module.exports = nextConfig;

whenever I even import monaco-languageclient version 6+ I get "Error: Assertion failed (There is already an extension with this id)"

[OliverwengFiltered]

I can confirm the vscode version mismatch in monaco-languageclient@6.5.0

[kaisalmen]

@OliverwengFiltered @cdietrich @rajialtooro and @CGNonofr it because of the missing ~ for vscode here:

"dependencies": {
    "monaco-editor": "~0.43.0",
    "vscode": "npm:@codingame/monaco-vscode-api@1.82.2",
    "@codingame/monaco-vscode-languages-service-override": "~1.82.2",
    "@codingame/monaco-vscode-model-service-override": "~1.82.2",
    "vscode-jsonrpc": "~8.1.0",
    "vscode-languageclient": "~8.1.0"
  },

As far as I know the ~ is not excepted in the notation and it was not a problem before, because there was only one package. Does anyone know a valid npm: notation allowing the ~

[rajialtooro]

@kaisalmen according to chatGPT 😭

"vscode": "npm:@codingame/monaco-vscode-api@>=1.82.0 <1.83.0"

I added it to my package.json

[kaisalmen]

@rajialtooro that seems to work indeed:

I only updated the vscode entry and npm update provided me the result the above.

[OliverwengFiltered]

@kaisalmen so assuming it will need a release on the monaco-languageclient side to fix the version mismatch here?

[kaisalmen]

Yes, exactly

[kaisalmen]

New release is available: https://www.npmjs.com/package/monaco-languageclient/v/6.5.1

Thank you all for getting to the bottom of this fairly quickly!

[OliverwengFiltered]

@kaisalmen , the latest version solves the mismatch error mentioned above, however, after bundling and building with the latest version 6.5.1, the editor just doesn't show up in DOM (blank), it's just does not render, and there is no console error printed as well, I wonder if you can reproduce it on your end.

and then I rolled back to v 6.4.6, the old version 6.4.6 works fine.

[kaisalmen]

@OliverwengFiltered just checked the examples again incl. webpack verification and also with monaco-editor-wrapper. It works fine.

[rajialtooro]

@OliverwengFiltered I'm facing the same issue with Nextjs, when I import anything from monaco-languageclient the editor component DOM stays blank,

when I tried to load it asynchronously like this

// in editor.tsx
import('./lsp').then(t =>
  t.performInit().catch(err => {
    console.log(err);
  })
);
...

// lsp.ts
import { initServices } from 'monaco-languageclient';

export const performInit = async () => {
  await initServices({ userServices: {}, debugLogging: true });
};

I get this weird error that not even the .catch is catching

[cdietrich]

@rajialtooro when i saw something like this in the past the problem was a bad polyfill for buffer. can you double check which version your use?

[rajialtooro]

@cdietrich these are the related packages I have, keep in mind that with the same config version 5.0.1 was working

    "monaco-editor": "^0.43.0",
    "monaco-editor-webpack-plugin": "^7.1.0",
    "monaco-languageclient": "^6.5.1",
    "next": "^13.2.4",
    "vscode-ws-jsonrpc": "^3.0.0",

[cdietrich]

@rajialtooro the question is what else may pull "buffer" and if yes in which version. if no buffer is pulled then the problem is something else

[rajialtooro]

@cdietrich I ran npm list buffer, though I don't see any package from monaco-languageclient that uses it

[cdietrich]

i had to resolve buffer to a newer version in package.json

"resolutions": {
   ...
    "buffer": "^6.0.3",
    ...
  }

the vscode buffer checks if buffer is available in global and if yes uses that one

[rajialtooro]

@cdietrich Worked like a charm, thank you 🥳

[cdietrich]

@kaisalmen might this be something for the troubleshooting section? this is including mine the 3rd occurrance of this problem? (see also https://github.com/TypeFox/monaco-languageclient/issues/538)

[kaisalmen]

@cdietrich good suggestion, see here

[cdietrich]

thx for the quick fixes @kaisalmen

[VVeaz]

I have this error (Assertion failed (There is already an extension with this id)) also in 7.3.0 (react.js, webpack) whenI tempororay commented out MonacoWebpackPlugin because with it I have error on webpacking - Error: Cannot find module 'vs/editor/standalone/browser/quickAccess/standaloneGotoLineQuickAccess'

is there any workaround to fix this errors?

[CGNonofr]

You can still use MonacoWebpackPlugin, you just need to disable the features. I don't recommend using it though

@kaisalmen maybe we should go back to monaco-editor-core as we don't use any of the features added by monaco-editor on top of the core

[VVeaz]

@CGNonofr thanks for quick answer. But I don't know, what feature I need to disable?

this is my imports

import React, { createRef, useEffect, useRef, useState } from 'react';
import { setDiagnosticsOptions } from 'monaco-yaml';
import "monaco-editor/esm/vs/basic-languages/yaml/yaml";
import {useEventListener} from "usehooks-ts";

import { useDarkMode } from 'usehooks-ts';
import { v4 as uuidv4 } from 'uuid';

import "./monacoEditor.scss";
import { createUrl, createWebSocket, removeOrAddComment } from './MonacoHelper';
import { initServices } from 'monaco-languageclient';
import { createConfiguredEditor, createModelReference } from 'vscode/monaco';
import getServiceOverride from '@codingame/monaco-vscode-base-service-override';
import { editor, languages, Uri, KeyMod, KeyCode } from 'monaco-editor/esm/vs/editor/editor.api.js';
import '@codingame/monaco-vscode-theme-defaults-default-extension';
//import 'vscode/default-extensions/lua'; //dont know yet what should replace it
//import 'vscode/default-extensions/css';
//import 'vscode/default-extensions/yaml';
import getConfigurationServiceOverride from '@codingame/monaco-vscode-configuration-service-override';
import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
import getThemeServiceOverride from '@codingame/monaco-vscode-theme-service-override';
import getTextmateServiceOverride from '@codingame/monaco-vscode-textmate-service-override';
import { updateUserConfiguration } from '@codingame/monaco-vscode-configuration-service-override';

[CGNonofr]

see https://github.com/CodinGame/monaco-vscode-api/issues/219

[VVeaz]

@CGNonofr thanks it helps to webpack problem but I still have Uncaught Error: Assertion failed (There is already an extension with this id) when I try start monaco editor

[CGNonofr]

if you want some help, please provide a minimal repo

[VVeaz]

It seems that this is minimal repo ...

import React, { createRef, useEffect, useRef, useState } from 'react';
import { initServices } from 'monaco-languageclient';

export default function MonacoEditor(props) {

    return (
            <React.Fragment>

            </React.Fragment>
            );
}
;

then I got it:

without import { initServices } from 'monaco-languageclient'; there is no error

[CGNonofr]

What bundler do you use? with what configuration? what versions of the libs do you use? did you try what was discussed previously about buffer? are you sure there is no duplicated versions of some libs?

[kaisalmen]

@kaisalmen maybe we should go back to monaco-editor-core as we don't use any of the features added by monaco-editor on top of the core

@CGNonofr Isn't this default what @codingame/monaco-editor-treemended loads if you just import it? Or do we need to change it back to only import it like this import * as monaco from 'monaco-editor/esm/vs/editor/edcore.main.js'; (editor-core)? Honestly, you confused me a bit by that question.

[CGNonofr]

@codingame/monaco-editor-treemended is a patched version that, among other things, removes everything added by monaco-editor. Using monaco-editor instead if monaco-editor-core makes the patch file a lot bigger and doesn't really make sense anymore. Also monaco-editor is bundled with metadata files used by the monaco-webpack-loader and those files are untouched in monaco-editor-treemended, leading to confusing errors for users

[kaisalmen]

@CGNonofr Ok, so whatever we have it is not compatible with regular monaco-editor tooling in the end or needs proper customization (see https://github.com/CodinGame/monaco-vscode-api/issues/219). Wouldn't it then make sense to fully rely/rename (also for all your packages) on a self-standing npm package e.g. called monaco-vscode-api-editor that can be used in combination with overrides / resolutions to override monaco-editor. It is basically what is done here already.

This way people realize the have something else and could force it in the dependency chain instead of monaco-editor. Also, then people no longer need such tooling (MonacoWebpackPlugin), right? Does it make sense? WDYT?

[CGNonofr]

let's discuss it on https://github.com/CodinGame/monaco-vscode-api/discussions/325

[VVeaz]

• What bundler do you use? - I use webpack

• with what configuration? - this is webpack.config.js :

  var path = require('path');
  const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
  module.exports = {
  entry: './src/index.js',
  mode: 'production',
  output: {
      path: path.resolve(__dirname, 'build'),
      filename: 'index.js',
      libraryTarget: 'commonjs2'
  },
  
  module: {
      rules: [
          {
              test: /\.js$/,
              include: path.resolve(__dirname, 'src'),
              exclude: /(node_modules|bower_components|build)/,
              use: {
                  loader: 'babel-loader',
                  options: {
                      presets: ["@babel/preset-env", "@babel/preset-react"]
                  }
              }
          },
          {test: /\.css$/, use: ['style-loader', 'css-loader']},
          {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},
          {
              test: /\.(woff|woff2|eot|ttf|otf)$/i,
              type: 'asset/resource',
          }
      ]
  },
  plugins: [new MonacoWebpackPlugin({
      features: ['!gotoLine', '!inspectTokens', '!quickCommand', '!quickHelp', '!quickOutline', '!referenceSearch', '!toggleHighContrast'],
      publicPath: "resources/react/dist/",
      languages: ['yaml'],
      customLanguages: [
          {
              label: 'yaml',
              entry: 'monaco-yaml',
              worker: {
                  id: 'monaco-yaml/yamlWorker',
                  entry: 'monaco-yaml/yaml.worker'
              }
          }
      ]
  })],
  externals: {
      'react': 'commonjs react',
      "axios": "axios",
      "js-cookie": "js-cookie",
      "react-singleton-hook": "react-singleton-hook",
      "@chiragrupani/fullscreen-react": "@chiragrupani/fullscreen-react",
  }
  };

what versions of the libs do you use?

"@codingame/monaco-vscode-configuration-service-override": "1.85.0",
        "@codingame/monaco-vscode-keybindings-service-override": "1.85.0",
        "@codingame/monaco-vscode-textmate-service-override": "1.85.0",
        "@codingame/monaco-vscode-theme-defaults-default-extension": "1.85.0",
        "@codingame/monaco-vscode-theme-service-override": "1.85.0",
"monaco-editor": "0.45.0",
        "monaco-editor-webpack-plugin": "^7.1.0",
        "monaco-languageclient": "7.3.0",
        "monaco-yaml": "^4.0.4",
        "vscode": "npm:@codingame/monaco-vscode-api@1.85.0",

• did you try what was discussed previously about buffer? - No because I've thought its about another issue. Now I've just added

  "resolutions": {
       "buffer": "^6.0.3"
     },

  in package.json but it don't help me. The same error.

• are you sure there is no duplicated versions of some libs?

• I'm not sure. I've run npm list vscode and I get

so I've change 1.85.0 to 1.85.5 and now import { initServices } from 'monaco-languageclient'; doesn't generating error! Thank you very much! After restoring all the code, I get the error Error: Services are already initialized

but maybe its some usage thing or I will create new issue. Thanks again.

[kaisalmen]

let's discuss it on https://github.com/CodinGame/monaco-vscode-api/discussions/325

Good idea. I need to do something else right now. Proper feedback will come tonight or tomorrow