添加此webpack配置为我修复了它

const withCSS = require('@zeit/next-css');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = withCSS({
  webpack(config, options) {
    config.plugins.push(new MonacoWebpackPlugin());
    return config;
  },
  cssLoaderOptions: { url: false }
})

字符串

@monaco-editor/react第三方助手

我不知道为什么它工作，我宁愿避免第三方的东西，但这是他的第一件事，我得到了工作，他们只是 Package 得很好，所以它是：

• https://www.npmjs.com/package/@monaco-editor/react
• https://github.com/suren-atoyan/monaco-react的

你可以去掉MonacoWebpackPlugin。
我测试的关键依赖项：

"dependencies": {
    "@monaco-editor/react": "4.2.1",
    "next": "11.0.1",
    "monaco-editor": "0.26.1",

字符串
然后使用方法如README中所述。它们公开了一个Editor组件帮助器，但如果需要，您也可以获得一个monaco示例。
相关内容：

• https://dev.to/swyx/how-to-add-monaco-editor-to-a-next-js-app-ha3的
• https://github.com/react-monaco-editor/react-monaco-editor/issues/271的
• https://github.com/resourcesco/snippets/blob/master/docs/monaco-editor-with-next.md的
• https://github.com/react-monaco-editor/react-monaco-editor/issues/334的
• https://github.com/ritz078/transform/issues/282

以下是我在2023年使用Next.js 13.4.11和monaco编辑器0.40.0的工作。

安装

npm install monaco-editor-webpack-plugin
npm install style-loader
npm install css-loader

字符串

next.config.js

/** @type {import('next').NextConfig} */

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const monacoRules = [
  {
    test: /\.ttf$/,
    type: 'asset/resource'
  }
]

module.exports = {
  webpack: (
    config,
    { isServer }
  ) => {

    // Modify config and then return it
    if(!isServer) {
      console.log(config)
      config.plugins.push(new MonacoWebpackPlugin({
        languages: ["javascript", "markdown", "yaml"],
        filename: "static/[name].worker.js",
      }))
      config.module.rules.push(...monacoRules)
    }

    return config
  },
}

型

MyClientComponent.js

"use client"

import { useEffect, useRef, useState } from "react"
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

export default function MyEditor() {
  const [editor, setEditor] = useState(null)
  const editorRef = useRef(null)

  // Instantiate Monaco Editor
  useEffect(() => {
    const options = {
      value: "# Hello World",
      language: 'markdown'
    }
    const myEditor = monaco.editor.create(editorRef.current, options);
    setEditor(myEditor)
    return () => { editor.dispose() }
  }, [editorRef])

  return (
    <div ref={ editorRef }></div>
  )
}

型

注意import语句import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'。

import * as monaco from 'monaco-editor'给了我错误
错误：EditorSimpleWorker.loadForeignModule（webpack-internal：/（app-pages-browser）/./node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js：523：31）at eval（webpack-internal：/（app-pages-browser）/./node_modules/monaco-editor/esm/vs/editor/editor/editor/browser/services/webWorker.js：44：30）at async eval（webpack-internal：/./node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js：116：16）意外使用
当使用language: 'javascript'时。