microsoft / microsoft/monaco-editor

[Bug] Duplicate module load issue: 'error-stack-parser' when Monaco is combined with Pyodide under AMD loading

Open
#4,384 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
46.8k
Forks
4.1k
Avg merge
17h 58m
Merged PRs (30d)
1

Description

Reproducible in vscode.dev or in VS Code Desktop?
  • Not reproducible in vscode.dev or VS Code Desktop
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:

  1. Monaco's AMD Loader: https://github.com/microsoft/monaco-editor/blob/21007360cad28648bdf46282a2592cb47c3a7a6f/docs/integrate-amd.md
  2. 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/monaco-editor@0.45.0/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/monaco-editor@0.45.0/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.

Duplicate module load issue: 'error-stack-parser'
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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the pyodide-monaco-combination.html minimal example, using the Monaco AMD loader.js entry point and the linked Monaco and Pyodide loading examples. Reproduce the missing stackframe.js and error-stack-parser failure, then determine whether the interaction is actionable in Monaco; done means Monaco initializes without that error when combined with Pyodide.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.