如何在 NPM 模块中导出 react-froala-wysiwyg 编辑器？

Question

我有一个 npm 模块，它由我在各种项目中部署的可重复使用的反应组件组成。

我刚刚将 react-froala 插入到我的包中，它在故事书中呈现得很好，如下所示：

但是，当我从我的一个项目应用程序调用该组件时，我得到：

我注意到控制台中出现以下错误。我该如何解决？

/Users/joel/Sites/node_modules/dist/index.js:30398
                __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)):"object"==typeof module&&module.exports?module.exports=function(e,t){return t===undefined&&(t="undefined"!=typeof window?require("jquery"):require("jquery")(e)),n(t)}:n(window.jQuery)}(function(be){var s=function(e,t){this.id=++be.FE.ID,this.opts=be.extend(!0,{},be.extend({},s.DEFAULTS,"object"==typeof t&&t));var n=JSON.stringify(this.opts);be.FE.OPTS_MAPPING[n]=be.FE.OPTS_MAPPING[n]||this.id,this.sid=be.FE.OPTS_MAPPING[n],be.FE.SHARED[this.sid]=be.FE.SHARED[this.sid]||{},this.shared=be.FE.SHARED[this.sid],this.shared.count=(this.shared.count||0)+1,this.$oel=be(e),this.$oel.data("froala.editor",this),this.o_doc=e.ownerDocument,this.o_win="defaultView"in this.o_doc?this.o_doc.defaultView:this.o_doc.parentWindow;var r=be(this.o_win).scrollTop();this.$oel.on("froala.doInit",be.proxy(function(){this.$oel.off("froala.doInit"),t

TypeError: Cannot set property 'froalaEditor' of undefined
    at Object.<anonymous> (/Users/joel/Sites/node_modules/dist/index.js:30398:5564)
    at t.id (/Users/joel/Sites/node_modules/dist/index.js:30397:37)
    at Object.<anonymous> (/Users/joel/Sites/node_modules/dist/index.js:30398:286)
    at __webpack_require__ (/Users/joel/Sites/node_modules/dist/index.js:30:30)
    at Object.<anonymous> (/Users/joel/Sites/node_modules/dist/index.js:30297:1)
    at __webpack_require__ (/Users/joel/Sites/node_modules/dist/index.js:30:30)
    at Object.<anonymous> (/Users/joel/Sites/node_modules/dist/index.js:29418:21)
    at __webpack_require__ (/Users/joel/Sites/node_modules/dist/index.js:30:30)
    at Object.defineProperty.value (/Users/joel/Sites/node_modules/dist/index.js:22870:27)
    at __webpack_require__ (/Users/joel/Sites/node_modules/dist/index.js:30:30)

Answer 1

已解决！事实证明，这个问题与 react-froala 无关。出口已经工作。问题是我的 npm 模块没有捆绑所需的样式。我只需要更新我的 webpack 配置以使用 extract-text-webpack-plugin 并随后在我的下游项目中导入输出 css 文件以使其全部运行。祝你好运！

如何在 NPM 模块中导出 react-froala-wysiwyg 编辑器？

How to export react-froala-wysiwyg editor in an NPM module?

reactjs

froala