使用webpack serve运行Lexical React项目时出现编辑器状态异常

之前用react-scripts start能正常运行的Lexical React项目，现在要改为主项目的模块，配置了Webpack构建生产包，并用webpack serve做本地调试，但运行时出现以下错误：

Unable to find an active editor state. State helpers or node methods can only be used synchronously during the callback of editor.update() or editorState.read().
at getActiveEditorState (webpack-internal:///./node_modules/lexical/Lexical.dev.js:8973:13)
at $getRoot (webpack-internal:///./node_modules/lexical/Lexical.dev.js:887:26)
at eval (webpack-internal:///./node_modules/lexical/Lexical.dev.js:861:33)
at readEditorState (webpack-internal:///./node_modules/lexical/Lexical.dev.js:9211:12)
at EditorState.read (webpack-internal:///./node_modules/lexical/Lexical.dev.js:10559:12)
at getEditorStateTextContent (webpack-internal:///./node_modules/lexical/Lexical.dev.js:861:22)
at triggerTextContentListeners (webpack-internal:///./node_modules/lexical/Lexical.dev.js:9413:30)
at commitPendingUpdates (webpack-internal:///./node_modules/lexical/Lexical.dev.js:9399:3)
at eval (webpack-internal:///./node_modules/lexical/Lexical.dev.js:9686:9)

配置文件信息 #

package.json #

{
  "name": "@robothoustra/texteditor",
  "version": "0.1.0",
  "private": true,
  "main": "dist/IndexEditor.js",
  "files": [
    "dist",
    "src/features",
    "src/components"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/robothoustra/texteditor"
  },
  "publishConfig": {
    "access": "restricted"
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@excalidraw/excalidraw": "^0.14.2",
    "@lexical/clipboard": "0.11.3",
    "@lexical/code": "0.11.3",
    "@lexical/file": "0.11.3",
    "@lexical/hashtag": "0.11.3",
    "@lexical/link": "0.11.3",
    "@lexical/list": "0.11.3",
    "@lexical/mark": "0.11.3",
    "@lexical/overflow": "0.11.3",
    "@lexical/plain-text": "0.11.3",
    "@lexical/react": "^0.11.3",
    "@lexical/rich-text": "0.11.3",
    "@lexical/selection": "0.11.3",
    "@lexical/table": "0.11.3",
    "@lexical/utils": "0.11.3",
    "@mui/icons-material": "^5.14.1",
    "@mui/material": "^5.13.7",
    "@reduxjs/toolkit": "^1.9.5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "autosuggest-highlight": "^3.3.4",
    "babel-loader": "^9.1.3",
    "babel-preset-react-app": "^10.0.1",
    "katex": "^0.16.8",
    "lexical": "^0.11.1",
    "lodash-es": "^4.17.21",
    "match-sorter": "^6.3.1",
    "mini-css-extract-plugin": "^2.7.6",
    "natural": "^6.5.0",
    "path": "^0.12.7",
    "postcss-loader": "^7.3.3",
    "prettier": "^2.3.2",
    "process": "^0.11.10",
    "react-error-boundary": "^3.1.4",
    "react-redux": "^8.1.1",
    "react-window": "^1.8.9",
    "source-map-loader": "^4.0.1",
    "util": "^0.12.5",
    "web-vitals": "^2.1.4",
    "y-websocket": ">=1.3.x",
    "yjs": ">=13.5.42"
  },
  "devDependencies": {
    "@babel/cli": "^7.23.0",
    "@babel/core": "^7.23.0",
    "@babel/preset-env": "^7.22.20",
    "@babel/preset-react": "^7.22.15",
    "@babel/runtime": "^7.13.8",
    "@types/lodash-es": "^4.14.182",
    "@types/react": "^18.2.23",
    "@types/react-dom": "^18.2.8",
    "css-loader": "^6.8.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.3",
    "node-sass": "^7.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sass-loader": "^13.3.2",
    "style-loader": "^3.3.3",
    "svg-inline-loader": "^0.8.2",
    "ts-loader": "^9.4.4",
    "typescript": "^5.2.2",
    "url-loader": "^4.1.1",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "scripts": {
    "start": "webpack serve --mode development --config webpack.config.dev.js",
    "build:dev": "webpack --config webpack.config.dev.js",
    "build:prod": "webpack --config webpack.config.prod.js",
  },
  "eslintConfig": {
    "root": true,
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

webpack.config.dev.js #

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require("webpack");

module.exports = {
    entry: './src/index.js', // Entry point of your React application,
    mode: "development",
    resolve: {
      fallback: {
        crypto: false, // require.resolve("crypto-browserify") can be polyfilled here if needed
        stream: false, // require.resolve("stream-browserify") can be polyfilled here if needed
        assert: false, // require.resolve("assert") can be polyfilled here if needed
        http: false, // require.resolve("stream-http") can be polyfilled here if needed
        https: false, // require.resolve("https-browserify") can be polyfilled here if needed
        os: false, // require.resolve("os-browserify") can be polyfilled here if needed
        url: false, // require.resolve("url") can be polyfilled here if needed
        zlib: false, // require.resolve("browserify-zlib") can be polyfilled here if needed
        fs: false,
      },   
      extensions: ['.tsx', '.ts', '.js'],
      fullySpecified: false,
    },
    // devtool: "eval",
    devtool: "eval-source-map",
    optimization: {
      portableRecords: true,
    },
    output: {
      path: path.resolve(__dirname, 'build'),
      filename: 'bundle.js'
    },
      module: {
      rules: [
        {
          test: /\.js$/, // Match JavaScript files
          exclude: /node_modules/, // Exclude node_modules
          use: {
            loader: 'babel-loader', // Use Babel for JavaScript transpilation
          },
        },
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/,
        },  
        {
          test: /\.css$/, // Match CSS files
          use: ['style-loader', 'css-loader'], // Handle CSS files
        },
        {
          test: /\.(png|jpe?g|gif|jp2|webp|ico)$/,
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
          },
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './public/index.html',
        favicon: './public/favicon.ico'
      }),
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify('development'),
        'process.env.NODE_DEBUG': JSON.stringify(false),
      }),
    ],
    devServer: {
      port: 3000, // Port for development server
      hot: true,
      open: true,
    },
    devtool: 'eval-source-map', // Enable source maps for easier debugging
    ignoreWarnings: [
      {
        module: /classifiers/,
      },
      /warning from compiler/,
      (warning) => true,
    ],  
};

已尝试的操作 #

• 移除编辑器所有插件，错误依然存在
• 之前遇到React相关问题时，通过在index.js添加window.React = React;解决，推测是同类模块加载/全局上下文问题，但不知道如何针对Lexical处理

内容的提问来源于stack exchange，提问作者bothoustra