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

OliverwengFiltered · 2023-10-02T14:42:11Z

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

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

cdietrich · 2023-10-02T15:40:17Z

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

kaisalmen · 2023-10-02T16:47:01Z

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

kaisalmen · 2023-10-04T09:23:43Z

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

rajialtooro · 2023-10-04T10:45:21Z

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 · 2023-10-04T11:33:05Z

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 · 2023-10-04T13:23:08Z

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

kaisalmen · 2023-10-04T14:17:31Z

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 · 2023-10-04T14:25:08Z

I will clarify the README.

Done ✅

cdietrich · 2023-10-04T14:41:58Z

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 · 2023-10-04T14:49:52Z

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 · 2023-10-04T14:59:54Z

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 · 2023-10-04T15:01:38Z

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

kaisalmen · 2023-10-04T15:21:24Z

@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 · 2023-10-04T15:27:19Z

@kaisalmen
according to chatGPT 😭

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

I added it to my package.json

kaisalmen · 2023-10-04T15:40:28Z

@rajialtooro that seems to work indeed:

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

OliverwengFiltered · 2023-10-04T15:42:54Z

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

kaisalmen · 2023-10-04T16:26:10Z

Yes, exactly

kaisalmen · 2023-10-04T18:11:58Z

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 · 2023-10-04T20:32:44Z

@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 · 2023-10-04T20:38:58Z

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

rajialtooro · 2023-10-05T06:21:08Z

@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 · 2023-10-05T06:29:03Z

@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 · 2023-10-05T06:36:01Z

@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 · 2023-10-05T07:12:33Z

@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 · 2023-10-05T07:15:12Z

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

cdietrich · 2023-10-05T07:24:54Z

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 · 2023-10-05T07:28:26Z

@cdietrich Worked like a charm, thank you 🥳

cdietrich · 2023-10-05T07:30:25Z

@kaisalmen might this be something for the troubleshooting section? this is including mine the 3rd occurrance of this problem? (see also #538)

kaisalmen · 2023-10-05T11:52:54Z

@cdietrich good suggestion, see here

cdietrich · 2023-10-05T12:51:50Z

thx for the quick fixes @kaisalmen

VVeaz · 2024-01-23T10:03:35Z

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 · 2024-01-23T10:12:38Z

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 · 2024-01-23T10:38:34Z

@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 · 2024-01-23T10:41:59Z

see CodinGame/monaco-vscode-api#219

VVeaz · 2024-01-23T10:48:28Z

@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 · 2024-01-23T10:52:49Z

if you want some help, please provide a minimal repo

VVeaz · 2024-01-23T11:27:11Z

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 · 2024-01-23T13:10:09Z

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 · 2024-01-23T13:18:34Z

@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 · 2024-01-23T13:22:08Z

@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 · 2024-01-23T13:48:44Z

@CGNonofr Ok, so whatever we have it is not compatible with regular monaco-editor tooling in the end or needs proper customization (see CodinGame/monaco-vscode-api#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 · 2024-01-23T14:34:19Z

let's discuss it on CodinGame/monaco-vscode-api#325

VVeaz · 2024-01-23T14:54:52Z

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 · 2024-01-23T15:06:15Z

let's discuss it on CodinGame/monaco-vscode-api#325

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

cdietrich mentioned this issue Oct 3, 2023

Semantic Highlighting TypeFox/monaco-components#32

Closed

kaisalmen closed this as completed Oct 4, 2023

kaisalmen reopened this Oct 4, 2023

kaisalmen closed this as completed Oct 4, 2023

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

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

Comments

OliverwengFiltered commented Oct 2, 2023 • edited Loading

cdietrich commented Oct 2, 2023

kaisalmen commented Oct 2, 2023

kaisalmen commented Oct 4, 2023

rajialtooro commented Oct 4, 2023

CGNonofr commented Oct 4, 2023

OliverwengFiltered commented Oct 4, 2023

kaisalmen commented Oct 4, 2023

kaisalmen commented Oct 4, 2023

cdietrich commented Oct 4, 2023 • edited Loading

cdietrich commented Oct 4, 2023

rajialtooro commented Oct 4, 2023

OliverwengFiltered commented Oct 4, 2023

kaisalmen commented Oct 4, 2023

rajialtooro commented Oct 4, 2023

kaisalmen commented Oct 4, 2023 • edited Loading

OliverwengFiltered commented Oct 4, 2023

kaisalmen commented Oct 4, 2023

kaisalmen commented Oct 4, 2023

OliverwengFiltered commented Oct 4, 2023 • edited Loading

kaisalmen commented Oct 4, 2023

rajialtooro commented Oct 5, 2023

cdietrich commented Oct 5, 2023

rajialtooro commented Oct 5, 2023 • edited Loading

cdietrich commented Oct 5, 2023 • edited Loading

rajialtooro commented Oct 5, 2023

cdietrich commented Oct 5, 2023 • edited Loading

rajialtooro commented Oct 5, 2023

cdietrich commented Oct 5, 2023 • edited Loading

kaisalmen commented Oct 5, 2023

cdietrich commented Oct 5, 2023

VVeaz commented Jan 23, 2024

CGNonofr commented Jan 23, 2024

VVeaz commented Jan 23, 2024

CGNonofr commented Jan 23, 2024

VVeaz commented Jan 23, 2024

CGNonofr commented Jan 23, 2024

VVeaz commented Jan 23, 2024

CGNonofr commented Jan 23, 2024

kaisalmen commented Jan 23, 2024 • edited Loading

CGNonofr commented Jan 23, 2024 • edited Loading

kaisalmen commented Jan 23, 2024

CGNonofr commented Jan 23, 2024

VVeaz commented Jan 23, 2024

kaisalmen commented Jan 23, 2024

OliverwengFiltered commented Oct 2, 2023 •

edited

Loading

cdietrich commented Oct 4, 2023 •

edited

Loading

kaisalmen commented Oct 4, 2023 •

edited

Loading

OliverwengFiltered commented Oct 4, 2023 •

edited

Loading

rajialtooro commented Oct 5, 2023 •

edited

Loading

cdietrich commented Oct 5, 2023 •

edited

Loading

cdietrich commented Oct 5, 2023 •

edited

Loading

cdietrich commented Oct 5, 2023 •

edited

Loading

kaisalmen commented Jan 23, 2024 •

edited

Loading

CGNonofr commented Jan 23, 2024 •

edited

Loading