[Bug] Error: html: an 'include' attribute must be a string at: tokenizer.root

[Bradley Taylor (braders)]

Reproducible in vscode.dev or in VS Code Desktop?

• Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• Not reproducible in the monaco editor playground

Monaco Editor Playground Code

No response

Reproduction Steps

I am trying to implement a Monaco editor within an existing (Knockout based) application. No matter what I do I seem to get this error:

monarchCommon.ts:137 Uncaught (in promise) Error: html: an 'include' attribute must be a string at: tokenizer.root
    at Object.createError (monarchCommon.ts:137:9)
    at addRules (monarchCompile.ts:443:26)
    at compile (monarchCompile.ts:511:4)
    at Object.<anonymous> (standaloneLanguages.ts:378:142)
    at Generator.next (<anonymous>)
    at fulfilled (nls.ts:4:97)

I've tried various things to get this working, but without success:

1. Creating a model, rather than passing in the value and language directly
2. Setting the language after the editor has loaded
3. Rendering styles via a shadow DOM

My code to create the editor currently looks like this:

            const model = monaco.editor.createModel(textareaElem.value, 'html');
            var editor = monaco.editor.create(editorElem, {
                model: model,
            });

Actual (Problematic) Behavior

No response

Expected Behavior

No response

Additional Context

No response

[Chris Laplante (chris-laplante)]

I had a similar error when trying to install a custom language. The culprit was an old version of RequireJS on the page that added Array.prototype.include. I solved it like this:

(function () {
      // @ts-ignore
      const oldInclude = Array.prototype.include;
      // @ts-ignore
      delete Array.prototype.include;

      monaco.languages.setMonarchTokensProvider("mySpecialLanguage", {
          tokenizer: {
              root: [
                  [/error.*/, "custom-error"],
                  [/warning.*/, "custom-notice"],
                  [/\[info.*/, "custom-info"],
                  [/\[[a-zA-Z 0-9:]+\]/, "custom-date"],
              ],
          },
      });

    // @ts-ignore
    // eslint-disable-next-line no-extend-native
    Array.prototype.include = oldInclude;
})();

Hopefully this helps someone.