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

[Oliver-Weng-Sorcerer]

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 cdietrich/my-monaco-editor-react-example@7f597fb

[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

[Oliver-Weng-Sorcerer]

@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)"

[Oliver-Weng-Sorcerer]

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 ~