Duplicate definition of module 'vs/editor/editor.main'

[yuicer]

Describe the bug when using @monaco-editor/react in nextjs, add another global umd script A module will case this warning and beside, A module will not be parsed to be used in window.A

[yuicer]

loader.js will make a side effet with window.define so that other global scripts can not work well

[suren-atoyan]

@yuicer please check this; it should help

[yuicer]

@suren-atoyan thanks for replying, but this work systemJsDefine = window.define does not work very well, cause I can not determine the time the third js will be loaded. Do we have another solution?

using Monaco within nextjs is extremely painful

1. cdn will pollute third cdn js 1.1 temp store window.define can not get an accurate time

2. local js with monaco will cause node_modules import problem 2.1 node_modules is hard to be fixed with [monaco-editor-webpack-plugin,next-transpile-modules] 2.2 change the webpack config of nextjs is not work as well const rule = config.module.rules .find(rule => rule.oneOf) .oneOf.find( r => // Find the global CSS loader r.issuer && r.issuer.include && r.issuer.include.includes("_app") ); if (rule) { rule.issuer.include = [ rule.issuer.include, // Allow `monaco-editor` to import global CSS: /[\\/]node_modules[\\/]monaco-editor[\\/]/ ]; }

   I got a big head, nearly given up

[suren-atoyan]

@yuicer please provide a reproducible repository or code snippet

[yuicer]

something like this @suren-atoyan the actual scene is more complex, I need to use editor value as an executable js snippet, this snippet requires the window variable which the third CDN script will add to the window

import React, { useEffect, useState } from 'react';
import Editor from '@monaco-editor/react';

export function Preview({ cdn }) {
  const [value,setValue] = useState('')
  useEffect(() => {
        eval(
          `
          import(
            '${cdn}',
          ).then(() => {
            // window.xxx.init(${value})
          });
          `
        );
  },[]);

  return (
    <Editor
      value={value}
      onChange={(value)=>setValue(value)}
      theme='light'
      defaultLanguage='javascript'
    />
  );
}