Search code examples
reactjsfroala

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

This question refers to the react-froala-wysiwyg package.

I have an npm module which consists of re-usable react components which I deploy across various projects.

I've just inserted react-froala into my package and it renders nicely in storybook as you can see below:

enter image description here

However, when I call the component from one of my project applications, I get this:

enter image description here

I notice the following error in my console. How should I resolve this?

/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)
Solution

  • Resolved! Turns out this issue had nothing to do with react-froala per say. The export already works. Issue was that my npm module was not bundling the required styles. I just had to update my webpack config to use the extract-text-webpack-plugin and subsquently import the output css file in my downstream project to get it all going. Good luck!