microsoft
[Bug] Duplicate module load issue: 'error-stack-parser' when Monaco is combined with Pyodide under AMD loading
Reproducible in vscode.dev or in VS Code Desktop?
- [X] Not reproducible in vscode.dev or VS Code Desktop
Reproducible in the monaco editor playground?
- [X] Not reproducible in the monaco editor playground
Monaco Editor Playground Link
No response
Monaco Editor Playground Code
No response
Reproduction Steps
Hi 👋
I've been trying to figure out how to get Monaco and Pyodide playing nicely with each other. Unfortunately, whenever I combine Pyodide with Monaco through AMD loading, the editor fails to load.
The MWE is constructed by merging the following two examples:
- Monaco's AMD Loader: https://github.com/microsoft/monaco-editor/blob/21007360cad28648bdf46282a2592cb47c3a7a6f/docs/integrate-amd.md
- Pyodide's alternative example: https://pyodide.org/en/stable/usage/quickstart.html#alternative-example
If I comment out Pyodide's initialization, there are no errors. Similarly, with Monaco Editor commented out, the duplicate model error is not problematic.
Example MWE:
pyodide-monaco-combination.html
<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/min/vs/loader.js"></script>
<script type="module" id="monaco-editor-init">
// Configure the Monaco Editor's loader
require.config({
paths: {
'vs': 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
}
});
</script>
<!--
Example pyodide load code from:
https://pyodide.org/en/stable/usage/quickstart.html#alternative-example
-->
<p>
You can execute any Python code. Just enter something in the box below and
click the button.
</p>
<input id="code" value="sum([1, 2, 3, 4, 5])" />
<button onclick="evaluatePython()">Run</button>
<br />
<br />
<div>Output:</div>
<textarea id="output" style="width: 100%;" rows="6" disabled></textarea>
<script>
const output = document.getElementById("output");
const code = document.getElementById("code");
function addToOutput(s) {
output.value += ">>>" + code.value + "\n" + s + "\n";
}
output.value = "Initializing...\n";
// init Pyodide
async function main() {
let pyodide = await loadPyodide();
output.value += "Ready!\n";
return pyodide;
}
let pyodideReadyPromise = main();
async function evaluatePython() {
let pyodide = await pyodideReadyPromise;
try {
let output = pyodide.runPython(code.value);
addToOutput(output);
} catch (err) {
addToOutput(err);
}
}
</script>
<!--
Attempt to place a monaco editor
-->
<div id="m-container" style="height:700px">
</div>
<script type="module">
// Load the Monaco Editor and create an instance
let editor;
require(['vs/editor/editor.main'], function() {
editor = monaco.editor.create(document.getElementById('m-container'), {
value: [
'def x():',
'\tprint("Hello world!")',
].join('\n'),
language: 'python'
});
});
</script>
</body>
</html>
Actual (Problematic) Behavior
When attempting to load both Monaco and Pyodide, I'm running into a duplicate module load issue. This issue causes the stackframe.js not to be available and, thus, the monaco editor cannot be instantiated.
Error text
Failed to load resource: the server responded with a status of 404 (Not Found)
monaco-pyodide-dependency-bug.html:1 Refused to execute script from 'http://127.0.0.1:5500/stackframe.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
loader.js:249 Loading "stackframe" failed
c @ loader.js:249
loader.js:250 Error: [object Event]
at Object.y [as ensureError] (loader.js:234:18)
at c._createLoadError (loader.js:1461:26)
at c._onLoadError (loader.js:1472:23)
at l (loader.js:1615:11)
at Object.errorback (loader.js:1635:7)
at y.triggerErrorback (loader.js:601:24)
at loader.js:588:107
at HTMLScriptElement.d (loader.js:621:5)
c @ loader.js:250
loader.js:251 Here are the modules that depend on it:
c @ loader.js:251
loader.js:252 Array(1)0: "error-stack-parser"length: 1[[Prototype]]: Array(0)
c @ loader.js:252
Expected Behavior
Ideally, Monaco would initialize without an error when incorporating Pyodide.
Additional Context
No response
I'm seeing the same problem using the @monaco-editor/react package. What can we do to prevent this?
...
"@monaco-editor/react": "4.6.0",
"monaco-editor": "0.46.0",
...
https://stackblitz.com/edit/stackblitz-starters-o5amwl?description=The%20React%20framework%20for%20production&file=pages%2Findex.tsx&title=Next.js%20Starter
Out of pure curiosity, are there any suggestions for how I can proceed with avoiding the error?
It seems like one suggestion is to remove the window.amd and reattach it when loading Pyodide per the linked issue above.
https://github.com/pyodide/pyodide/issues/4577#issuecomment-2128639200
Any pointers would be appreciated!
I'm also running into this problem when using the same dependency tree.
"@monaco-editor/react": "^4.6.0",
"@pyodide/webpack-plugin": "^1.3.2",
"monaco-editor": "^0.50.0",
"pyodide": "^0.26.1",
I do not see the error when I use react-py's context provider. (I get an error more related to that module's input handling from our debugging.) Though, they use pyodide 0.23.4.
Without react-py above, I'm calling loadPyodide() and its runPython() method in an onSubmit handler for react.
This seems to be fixed in the next version of pyodide though: https://github.com/pyodide/pyodide/pull/4866
