There is a problem with packaging after Tinymce is loaded asynchronously.

react project, server-side rendering, using tinymce rich text editor, loading asynchronously, then the development environment is no problem, and an error occurs after packaging.

is that all kinds of events are not successfully bound. Does any god know why there is nothing wrong with the development environment?
here is the configuration of tinymce:

import React, { PropTypes } from "react";
import assign from "object-assign";
import util from "./util";
import EditorConfig from "./editorConfig";
// Include all of the Native DOM and custom events from:
// https://github.com/tinymce/tinymce/blob/master/tools/docs/tinymce.Editor.js-sharpL5-L12
const EVENTS = [
  "click", "dblclick", "mousedown", "mouseup",
  "mousemove", "mouseover", "beforepaste", "paste", "cut", "copy",
  "selectionchange", "mouseout", "mouseenter", "mouseleave", "keydown",
  "keypress", "keyup", "contextmenu", "dragend", "dragover", "draggesture",
  "dragdrop", "drop", "drag", "BeforeRenderUI", "SetAttrib", "PreInit",
  "PostRender", "init", "deactivate", "activate", "NodeChange",
  "BeforeExecCommand", "ExecCommand", "show", "hide", "ProgressState",
  "LoadContent", "SaveContent", "BeforeSetContent", "SetContent",
  "BeforeGetContent", "GetContent", "VisualAid", "remove", "submit", "reset",
  "BeforeAddUndo", "AddUndo", "change", "undo", "redo", "ClearUndos",
  "ObjectSelected", "ObjectResizeStart", "ObjectResized", "PreProcess",
  "PostProcess", "focus", "blur",
];

// Note: because the capitalization of the events is weird, we"re going to get
// some inconsistently-named handlers, for example compare:
// "onMouseleave" and "onNodeChange"
const HANDLER_NAMES = EVENTS.map(event => `on${util.uc_first(event)}`);


class Tinymce extends React.Component {
  componentWillMount() {
    if (typeof window.tinymce !== "object") {
      console.warn("TinyMCE is not found in global, init failed");
    }
    this.id = this.id || util.uuid();
  }

  componentDidMount() {
    this.init(this.props.config);
  }


  componentWillReceiveProps(nextProps) {
    if (!util.isEqual(nextProps.config, this.props.config)) {
      this.init(nextProps.config, nextProps.content);
    }
    if (nextProps.content !== this.props.content && window.tinymce) {
      if (!this.isInited) {
        this.contentToBeSet = nextProps.content;
      }
    }
  }

  shouldComponentUpdate(nextProps) {
    return (
      !util.isEqual(this.props.content, nextProps.content) ||
      !util.isEqual(this.props.config, nextProps.config)
    );
  }

  componentWillUnmount() {
    this.remove();
  }

  setTinymceContent = (value) => {
    const editor = window.tinymce.get(this.id);
    editor.setContent(value);
    editor.selection.select(editor.getBody(), true);
    editor.selection.collapse(false);
  }

  saveRef = refName => (c) => {
    this[refName] = c;
  }

  resetValue = (value) => {
    if (this.setValueTimer) {
      clearTimeout(this.setValueTimer);
    }
    this.setValueTimer = setTimeout(() => {
      if (this.isInited) {
        this.setTinymceContent(value);
      } else {
        this.contentToBeSet = value;
      }
    }, this.props.changeDelay);
  }

  init = (config, content) => {
    if (this.isInited) {
      this.remove();
    }
    // hide the textarea until init finished
    this.root.style.visibility = "hidden";
    const trueConfig = assign({}, EditorConfig, config);
    trueConfig.selector = `-sharp${this.id}`;
    if (!trueConfig.language) {
      trueConfig.language = "zh_CN";
    }
    trueConfig.setup = (editor) => {
      EVENTS.forEach((event, index) => {
        const handler = this.props[HANDLER_NAMES[index]];
        if (typeof handler !== "function") return;
        editor.on(event, (e) => {
          // native DOM events don"t have access to the editor so we pass it here
          handler(e, editor);
        });
      });
      // need to set content here because the textarea will still have the
      // old `this.props.content`
      editor.on("init", () => {
        this.isInited = true;
        editor.execCommand("fontName", false, "Microsoft YaHei");
        editor.execCommand("fontSize", false, "12pt");
        if (this.contentToBeSet) {
          editor.setContent(this.contentToBeSet);
        } else if (content) {
          editor.setContent(content);
        }
      });
    };
    window.tinymce.baseURL = "https://g.alicdn.com/platform/c/tinymce/4.3.12";
    window.tinymce.init(trueConfig);
    this.root.style.visibility = "";
  }

  remove = () => {
    window.tinymce.EditorManager.execCommand("mceRemoveEditor", true, this.id);
    this.isInited = false;
  }

  render() {
    return (
      <textarea
        ref={this.saveRef("root")}
        id={this.id} defaultValue={this.props.content}
        placeholder={this.props.placeholder}
      />
    );
  }
}

Tinymce.defaultProps = {
  config: {},
  changeDelay: 500,
};


// http://facebook.github.io/react/docs/reusable-components.html
Tinymce.propTypes = {
  config: PropTypes.object,
  /* eslint-disable */
  placeholder: PropTypes.string,
  content: PropTypes.string,
  changeDelay: PropTypes.number,
};

// add handler propTypes
HANDLER_NAMES.forEach((name) => {
  Tinymce.propTypes[name] = PropTypes.func;
});

Tinymce.displayName = "Tinymce";

export default Tinymce;

problem description

the environmental background of the problems and what methods you have tried

related codes

/ / Please paste the code text below (do not replace the code with pictures)

what result do you expect? What is the error message actually seen?

Jun.29,2021

resolved

  1. list items
Menu