Flutter web project with javascript modules that use requireJS (Monaco editor in Flutter web)

Question

I’m trying to use the Monaco editor in Flutter Web.

The simplest way that I see is to sync load all the resources example.

Here’s a stand alone html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
            rel="stylesheet"
            data-name="vs/editor/editor.main"
            href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/editor/editor.main.css"
        />

    <style>
      @font-face {
        font-family: "codicon",
        src: url("https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/base/browser/ui/codicons/codicon.ttf") format("truetype")
      }
    </style>
    <title>Monaco</title>
  </head>
  <body>
    <h2>Monaco Editor Sync Loading Sample</h2>
    <div id="code" style="width: 800px; height: 600px; border: 1px solid grey"></div>

    <script>
      var require = { paths: { vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs" } };
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/loader.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/editor/editor.main.nls.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/editor/editor.main.js"></script>

    <script>
      var editor = monaco.editor.create(document.getElementById("code"), {
        value:  ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
        language: "javascript",
        additionalCssClassName: "code"
      });
    </script>

  </body>
</html>

My question is: How do I modify the index.html file of the sample Flutter Web project, so I can load all the required assets? There seems to be an issue with the line

      var require = { paths: { vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs" } };

as the flutter build never finishes (gets stuck somewhere.) I see that Flutter itself uses requirejs and there may be a conflict that I don’t know how to resolve.

If you know how to do this, please post a Fluter Web index.html file that loads all the js required files for the editor.

Thank you,
T

Leave a Comment Cancel reply