"self is not defined error" in Next.js project about monaco-yaml HOT 5 CLOSED

import { dynamic } from "blitz"
import { setDiagnosticsOptions } from "monaco-yaml"
import { ComponentType } from "react"
import { MonacoEditorProps } from "react-monaco-editor"

const MonacoEditor: ComponentType<MonacoEditorProps> = dynamic(
  () => import("react-monaco-editor"),
  { ssr: false }
)

export const ModuleEditor = () => {
  return (
    <div>
      <MonacoEditor
        height={300}
        language="yaml"
        editorWillMount={() => {
          setDiagnosticsOptions({
            enableSchemaRequest: true,
            hover: true,
            completion: true,
            validate: true,
            format: true,
            schemas: [
              {
                uri: "http://myserver/bar-schema.json",
                schema: {
                  type: "object",
                  properties: {
                    q1: {
                      enum: ["x1", "x2"],
                    },
                  },
                },
              },
            ],
          })
        }}
      />
    </div>
  )
}

// blitz.config.ts (cause I use Blitz.js, but next.config.js should work similarly)

import { sessionMiddleware, simpleRolesIsAuthorized } from "blitz"
import bundleAnalyzer from "@next/bundle-analyzer"
import nextTranspileModules from "next-transpile-modules"
import MonacoWebpackPlugin from "monaco-editor-webpack-plugin"

const enableBundleAnalyzer = process.env.npm_lifecycle_event === "build"

const withTM = nextTranspileModules(["monaco-editor", "monaco-yaml"])

const withBundleAnalyzer = bundleAnalyzer({
  enabled: enableBundleAnalyzer,
})

module.exports = withTM(
  withBundleAnalyzer({
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
      // Allows the modules to find their module name during build time
      config.node = {
        ...config.node,
        __dirname: true,
      }
      config.plugins.push(
        new MonacoWebpackPlugin({
          languages: ["yaml"],
          features: [],
          filename: "static/[name].worker.js",
          customLanguages: [
            {
              label: "yaml",
              entry: "/workspace/myproject/node_modules/monaco-yaml/lib/esm/monaco.contribution",
              worker: {
                id: "vs/language/yaml/yamlWorker",
                entry: "/workspace/myproject/node_modules/monaco-yaml/lib/esm/yaml.worker.js",
              },
            },
          ],
        })
      )
      return config
    },
  })
)

// my editor component

import { dynamic } from "blitz"
import { setDiagnosticsOptions as _ } from "monaco-yaml"

const MonacoEditor = dynamic(() => import("react-monaco-editor"), { ssr: false })

export const ModuleEditor = () => {
  return (
    <div>
      <MonacoEditor
        height={300}
        language="yaml"
        editorWillMount={(monaco) => {
          monaco.languages.yaml.yamlDefaults.setDiagnosticsOptions({
            enableSchemaRequest: true,
            hover: true,
            completion: true,
            validate: true,
            format: true,
            schemas: [
              {
                // Id of the first schema
                uri: "http://myserver/bar-schema.json",
                schema: {
                  type: "object",
                  properties: {
                    q1: {
                      enum: ["x1", "x2"],
                    },
                  },
                },
              },
            ],
          })
        }}
      />
    </div>
  )
}