[ NEED HELP ] window is not defined on NextJS 14.1.0

[innocentpice]

i'm using NextJS ^14.1.0

'use client';

import { useEffect } from 'react';
import Editor from '@monaco-editor/react';
import { configureMonacoYaml } from 'monaco-yaml';

import { ItemClientConfigSchema } from './itemClientConfig.schema';
import { ItemServerConfigSchema } from './itemServerConfig.schema';

export default function EditorWrapper(props: Parameters<typeof Editor>[0]) {
  useEffect(() => {
    import('@monaco-editor/react')
      .then((module) => module.loader)
      .then((loader) => {
        if ('window' in global)
          loader.init().then((monaco) => {
            window.MonacoEnvironment = {
              getWorker(_, label) {
                switch (label) {
                  case 'yaml':
                    return new Worker(
                      new URL('monaco-yaml/yaml.worker', import.meta.url)
                    );
                  default:
                    return new Worker(
                      new URL(
                        'monaco-editor/esm/vs/editor/editor.worker',
                        import.meta.url
                      )
                    );
                }
              },
            };

            configureMonacoYaml(monaco, {
              enableSchemaRequest: true,
              hover: true,
              completion: true,
              validate: true,
              format: true,
              schemas: [
                {
                  fileMatch: ['item.client'],
                  schema: ItemClientConfigSchema,
                  uri: 'https://json.schemastore.org/prettierrc.json/client',
                },
                {
                  fileMatch: ['item.server'],
                  schema: ItemServerConfigSchema,
                  uri: 'https://json.schemastore.org/prettierrc.json/server',
                },
              ],
            });
          });
      });
  }, []);
  return <Editor {...props} />;
}

[remcohaszing]

If you call configureMonacoYaml() in a useEffect, you also need to cleanup in the useEffect cleanup. But this isn’t what causes your problem.

Although it might work, I strongly recommend to not use @monaco-editor/react. Instead, I suggest you integrate the monaco-editor package directly. When that works, adding monaco-yaml should be simple.

I haven’t tried making Monaco work in the Next.js app directory. You’re on your own here.

I’m closing this, as it’s a question, not an issue with monaco-yaml.

[innocentpice]

:: I SOVLED ::

https://v4.webpack.js.org/loaders/worker-loader/
react-monaco-editor/react-monaco-editor#271

some part of my code

"use client";

import React from "react";
import Editor from "@monaco-editor/react";
import loader from "@monaco-editor/loader";
import { configureMonacoYaml } from "monaco-yaml";
import yamlWorker from "worker-loader!monaco-yaml/yaml.worker";

loader.init().then(async (monaco) => {
  window.MonacoEnvironment = {
    getWorker(moduleId, label) {
      switch (label) {
        case "editorWorkerService":
          return new Worker(
            new URL(
              "monaco-editor/esm/vs/editor/editor.worker",
              import.meta.url
            )
          );
        case "yaml":
          return new yamlWorker();
        default:
          throw new Error(`Unknown label ${label}`);
      }
    },
  };
  configureMonacoYaml(monaco, {
    enableSchemaRequest: true,
    schemas: [
      {
        // If YAML file is opened matching this glob
        fileMatch: ["**/.prettierrc.*"],
        // Then this schema will be downloaded from the internet and used.
        uri: "https://json.schemastore.org/prettierrc.json",
      },
      {
        // If YAML file is opened matching this glob
        fileMatch: ["**/person.yaml"],
        // The following schema will be applied
        schema: {
          type: "object",
          properties: {
            name: {
              type: "string",
              description: "The person’s display name",
            },
            age: {
              type: "integer",
              description: "How old is the person in years?",
            },
            occupation: {
              enum: ["Delivery person", "Software engineer", "Astronaut"],
            },
          },
        },
        // And the URI will be linked to as the source.
        uri: "https://json.schemastore.org/prettierrc.json",
      },
    ],
  });
});

export default function MonacoEditor() {
  return (
    <div className="flex h-screen w-screen items-center justify-center">
      <Editor path="person.yaml" language="yaml" theme="vs-dark" />
    </div>
  );
}

** @remcohaszing can you label this issue for another

[remcohaszing]

I’m glad you got it to work!

can you label this issue for another

I don’t understand. What do you mean by this?