JSON support with Vite and React

[dalyIsaac]

Hi!

I'm attempting to use the Monaco Editor with JSON support in a Vite + React project, but I'm encountering an issue with loading the JSON worker. I've tried various things, none of which have worked.

The thing I'm currently stuck at is TypeError: Cannot set properties of undefined (setting 'vscodetextmate'). I have manually provided the workers in the config, which hasn't worked for me: https://github.com/dalyIsaac/monaco-react-json/blob/18834e6666a1b833b66bc21487cdd3e80393d77a/src/App.tsx#L86-L93

I've gone around in circles a bit, and I've added the @codingame/esbuild-import-meta-url-plugin and @codingame/monaco-vscode-rollup-vsix-plugin to my Vite config, but I'm still getting the error.

I was also getting issues earlier with accessing the resources directory for the JSON extension (hence some changes to the vite.config.ts), though I seem to have regressed past that point now.

I'd really appreciate any help which could point me in the right direction - I've created a minimal reproduction of the repo at https://github.com/dalyIsaac/monaco-react-json/.

As an aside, I've created a custom language using Langium which I've got working with Monaco, so a big thanks to the work which has been done on this ecosystem!

[CGNonofr]

The thing I'm currently stuck at is TypeError: Cannot set properties of undefined (setting 'vscodetextmate').

That's a known issue with vite, have a look at https://github.com/CodinGame/monaco-vscode-api/wiki/Troubleshooting#commonjs-dependencies

[dalyIsaac]

I have two branches, one attempting with a standalone JSON worker, and the other with the extension. Neither works 😢.

The standalone branch (https://github.com/dalyIsaac/monaco-react-json/tree/standalone) has the following imports:

import "@codingame/monaco-vscode-standalone-languages";
import "@codingame/monaco-vscode-standalone-json-language-features";

import TextEditorWorker from "@codingame/monaco-vscode-editor-api/esm/vs/editor/editor.worker?worker";
import TextMateWorker from "@codingame/monaco-vscode-textmate-service-override/worker?worker";
import JsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";

import { configureDefaultWorkerFactory } from "monaco-editor-wrapper/workers/workerLoaders";
import { MonacoEditorReactComp } from "@typefox/monaco-editor-react";
import { useWorkerFactory } from "monaco-languageclient/workerFactory";

Both this and the extension branch have the following monacoWorkerFactory configuration:

      monacoWorkerFactory: (logger) => {
        configureDefaultWorkerFactory();
        // eslint-disable-next-line react-hooks/rules-of-hooks
        useWorkerFactory({
          workerLoaders: {
            TextEditorWorker: () => new TextEditorWorker(),
            TextMateWorker: () => new TextMateWorker(),
            json: () => worker,
          },
          logger,
        });
      },

There are no errors in the browser, but console.log(monaco.getLanguageClient("json")) in the onLoad callback prints undefined. Highlighting works, but intellisense or the schema added in the userConfiguration don't work.

---

The extension branch (https://github.com/dalyIsaac/monaco-react-json/tree/extension) has the following imports:

import "@codingame/monaco-vscode-json-default-extension";
import "@codingame/monaco-vscode-json-language-features-default-extension";
import "@codingame/monaco-vscode-textmate-service-override";

import TextEditorWorker from "@codingame/monaco-vscode-editor-api/esm/vs/editor/editor.worker?worker";
import TextMateWorker from "@codingame/monaco-vscode-textmate-service-override/worker?worker";
import JsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";

import { configureDefaultWorkerFactory } from "monaco-editor-wrapper/workers/workerLoaders";
import { MonacoEditorReactComp } from "@typefox/monaco-editor-react";
import { useWorkerFactory } from "monaco-languageclient/workerFactory";

Similarly, the extension branch has no errors in the browser, no intellisense or schema validation. The onLoad callback doesn't appear to be called at all.

I would really appreciate any help you can provide to get either of these branches working (especially the standalone worker branch, as my understanding is that's better for the "classic" config type, which is what I'm already using for Langium).

[CGNonofr]

There are no errors in the browser, but console.log(monaco.getLanguageClient("json")) in the onLoad callback prints undefined.

The JSON worker has nothing to do with LSP

Highlighting works, but intellisense or the schema added in the userConfiguration don't work.

How do you add it?

[dalyIsaac]

The JSON worker has nothing to do with LSP

Oh, so do you not need the LSP if you have the worker?

How do you add it?

The schema is added via the vscodeApiConfig:

    vscodeApiConfig: {
      userConfiguration: {
        json: JSON.stringify({
          "json.validate.enable": true,
          "json.schemas": [
            {
              uri: "schema-id",
              fileMatch: ["*"],
              schema: {
                type: "object",
                patternProperties: {
                  "^(?=.*[A-Za-z0-9])[\\S]*": {
                    type: "string",
                    pattern: "^(?=.*[A-Za-z0-9])[\\S]*",
                  },
                },
                additionalProperties: false,
              },
            },
          ],
        }),
      },
    },

I didn't do anything for the intellisense - I thought the worker might do that, but maybe I need to since worker != LSP?

[CGNonofr]

Oh, so do you not need the LSP if you have the worker?

No, the json worker is built for monaco-editor itself, no need for external stuff

The schema is added via the vscodeApiConfig:

That configuration is not used by the standalone worker, only by the VSCode json extension

[dalyIsaac]

No, the json worker is built for monaco-editor itself, no need for external stuff

So this is what's providing the syntax highlighting, but isn't responsible for the validation.

That configuration is not used by the standalone worker, only by the VSCode json extension

So to get the schema validation working, and red squiggly lines in the editor for invalid JSON, I'd need to use the extension branch. If this is correct, would you have any ideas on where to go from here?

[CGNonofr]

So this is what's providing the syntax highlighting, but isn't responsible for the validation.

@codingame/monaco-vscode-standalone-json-language-features is for the intellisense (what you call validation). @codingame/monaco-vscode-standalone-languages handles the syntax highlighting

So to get the schema validation working, and red squiggly lines in the editor for invalid JSON, I'd need to use the extension branch. If this is correct, would you have any ideas on where to go from here?

It's also supported by the standalone worker, just another way. You can refer to the monaco-editor documentation, you can do something like https://medium.com/@alanhe421/implementing-json-schema-based-intelligent-suggestions-in-monaco-editor-2f52e5856c35

[dalyIsaac]

With the standalone, I've tried setting the diagnostic options you linked. While I can see they get successfully applied to the jsonDefaults, no errors seem to come through to Monaco. I tried simplifying down the code so the only validation it would perform would be comment allowComments: false. Unfortunately, that still didn't work, so I think I'm missing something still.

import "@codingame/monaco-vscode-standalone-languages";
import "@codingame/monaco-vscode-standalone-json-language-features";

import TextEditorWorker from "@codingame/monaco-vscode-editor-api/esm/vs/editor/editor.worker?worker";
import TextMateWorker from "@codingame/monaco-vscode-textmate-service-override/worker?worker";
import JsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";

import * as monaco from "monaco-editor";

import { configureDefaultWorkerFactory } from "monaco-editor-wrapper/workers/workerLoaders";
import { MonacoEditorReactComp } from "@typefox/monaco-editor-react";
import { useWorkerFactory } from "monaco-languageclient/workerFactory";

import { type WrapperConfig } from "monaco-editor-wrapper";

monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
  validate: true,
  allowComments: false,
});

console.log(monaco.languages.json);

const createWrapperConfig = (): WrapperConfig => {
  return {
    $type: "classic",
    editorAppConfig: {
      codeResources: {
        modified: {
          text: `{"key": "value"}`,
          uri: "/workspace/data.json",
          enforceLanguageId: "json",
        },
      },
      editorOptions: {
        language: "json",
      },
      monacoWorkerFactory: () => {
        configureDefaultWorkerFactory();

        // eslint-disable-next-line react-hooks/rules-of-hooks
        useWorkerFactory({
          workerLoaders: {
            TextEditorWorker: () => new TextEditorWorker(),
            TextMateWorker: () => new TextMateWorker(),
            json: () => new JsonWorker(),
          },
        });
      },
    },
  };
};

const wrapperConfig = createWrapperConfig();

function App() {
  return (
    <div style={{ height: "100vh", width: "100vw" }}>
      <MonacoEditorReactComp
        wrapperConfig={wrapperConfig}
        style={{ height: "100%" }}
      />
    </div>
  );
}

export default App;

[CGNonofr]

don't you have any error about monaco-editor/esm/vs/language/json/json.worker?worker? because that file doesn't exist 🤔 What you're looking for is probably @codingame/monaco-vscode-standalone-json-language-features/worker 🤔

[dalyIsaac]

I changed it to the following, with no effect.

import JsonWorker from "@codingame/monaco-vscode-standalone-json-language-features/worker?worker";

The monaco-editor which does exist is the remapped @codingame/monaco-vscode-editor-api:

    "node_modules/@codingame/monaco-vscode-standalone-json-language-features": {
      "version": "18.1.3",
      "resolved": "https://registry.npmjs.org/@codingame/monaco-vscode-standalone-json-language-features/-/monaco-vscode-standalone-json-language-features-18.1.3.tgz",
      "integrity": "sha512-r+wEYnsZU8sKKmNJt/XzsDqnZcXo3g9OnBGmAVoJMVCwQ6x/guJRvyvdru4pvLTF8zLJqoH66IrblnYo3g8mGw==",
      "license": "MIT",
      "dependencies": {
        "monaco-editor": "npm:@codingame/[email protected]"
      }
    },

[dalyIsaac]

I'm sorry, I was on the extensions branch. Switching the worker for the standalone branch works! Thank you so much for the help and bearing with me, you're a legend! 🙇