词法编辑器和Next JS

Question

我在 next js 中使用词法。 使用 npm run dev，一切正常。 在 npm run build 上，我收到以下错误：

TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
at oo (6506-58498e6309b8c34d.js:1:128656)
at Po.setRootElement (6506-58498e6309b8c34d.js:1:150077)
...

下面是我的词汇文件。

import { $getRoot } from "lexical";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
import MyLexicalTheme from "../lexical-theme";
import ToolbarPlugin from "./ToobarPlugin";
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
import { $generateHtmlFromNodes } from "@lexical/html";
import { useEffect } from "react";

const theme = MyLexicalTheme;


function onError(error) {

  throw error;
}

function LexicalEditorWrapper({
  setMyCommentText,
  setEditorAndRootValuesInParent,
}) {
  const initialConfig = {
    namespace: "MyEditor",
    theme,
    onError,
  };
  return (
    <LexicalComposer initialConfig={initialConfig}>
      <div className="editor-container">
        <div className="editor-inner">
          <RichTextPlugin
            contentEditable={<ContentEditable className="editor-input" />}
            placeholder={
              <div className="editor-placeholder">Enter some text...</div>
            }
          />
   
        </div>
      </div>
    </LexicalComposer>
  );
}

export default LexicalEditorWrapper;

请问我该如何解决这个问题？互联网搜索并没有透露太多信息。我正在使用词汇版本^0.16.0

Answer 1

我遇到了同样的问题。经过测试，我发现只有在代码被缩小和混淆后才会出现这个问题。因此，我尝试确定是否是压缩工具的问题。当我将 JS minifier 更改为

esbuild

并将目标设置为

['chrome80', 'es2020']

时，问题就解决了。您可能想尝试一下。