Open yuicer opened 1 year ago
loader.js will make a side effet with window.define so that other global scripts can not work well
@yuicer please check this; it should help
@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
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
@yuicer please provide a reproducible repository or code snippet
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'
/>
);
}
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