Open jianSings opened 3 months ago
custom-element.js:11 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "my-component" has already been used with this registry
This error appears to be due to a duplicate registration of the web component.
You need to check your code, if you are already using the @customElement
decorator, you don't need to manually register again.
So I am using a component and defining the custom element in index
`import { LitElement, html, css } from 'lit'; import { property, customElement } from 'lit/decorators.js'; import { createRef, Ref, ref } from "lit/directives/ref.js"; import * as monaco from 'monaco-editor';
@customElement('my-component')
export class MyMonacoEditor extends LitElement {
private container: Ref
static styles = css :host { --editor-width: 100%; --editor-height: 100vh; } main { width: var(--editor-width); height: var(--editor-height); }
;
render() { return html`
<main ${ref(this.container)}></main>
`;
}
private getFile() { if (this.children.length > 0) return this.children[0]; return null; }
private getCode() { if (this.code) return this.code; const file = this.getFile(); if (!file) return; return file.innerHTML.trim(); }
private getLang() { if (this.language) return this.language; const file = this.getFile(); if (!file) return; const type = file.getAttribute("type")!; return type.split("/").pop()!; }
private getTheme() { if (this.theme) return this.theme; if (this.isDark()) return "vs-dark"; return "vs-light"; }
private isDark() { return ( window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ); }
setValue(value: string) { this.editor!.setValue(value); }
getValue() { const value = this.editor!.getValue(); return value; }
setReadOnly(value: boolean) { this.readOnly = value; this.setOptions({ readOnly: value }); }
setOptions(value: monaco.editor.IStandaloneEditorConstructionOptions) { this.editor!.updateOptions(value); }
firstUpdated() { this.editor = monaco.editor.create(this.container.value!, { value: this.getCode(), language: this.getLang(), theme: this.getTheme(), automaticLayout: true, readOnly: this.readOnly ?? false, }); this.editor.getModel()!.onDidChangeContent(() => { this.dispatchEvent(new CustomEvent("change", { detail: {} })); }); window .matchMedia("(prefers-color-scheme: dark)") .addEventListener("change", () => { monaco.editor.setTheme(this.getTheme()); }); } }
declare global { interface HTMLElementTagNameMap { "my-component": MyMonacoEditor; } }`
Code - monaco-webpack-ts.zip
Also does this fix also account for the autocomplete UI issue and the double cursor errors?
Reproducible in vscode.dev or in VS Code Desktop?
Reproducible in the monaco editor playground?
Monaco Editor Playground Link
No response
Monaco Editor Playground Code
No response
Reproduction Steps
No response
Actual (Problematic) Behavior
While injecting the monaco-editor using lit and webpack I am not able to render the editor completely it shows an error
custom-element.js:11 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "my-component" has already been used with this registry
Expected Behavior
No response
Additional Context
No response