1

On every page of my site, I want to include React, React DOM, and React Bootstrap from cdnjs.com. I have already npm installed react-tinymce. What I want to do is write a component that uses react-tinymce to display a tinymce editor; when it is bundled via gulp, I only want to bundle react-tinymce and my component in my dist.js; I do not want React, React DOM, nor React Bootstrap bundled in dist.js.

So I tried externals (Webpack and external libraries) and I also tried browserify-shim, but it just doesn't want to work; it just keeps saying react is not defined. The bundle only works if I bundle React, React DOM, and React Bootstrap along with react-tinymce and my component.

As I'm trying to move away from browserify, can someone provide sample configs for both webpack and jspm to accomplish this? Based on Googling it shoudl be simple but as with all javascript tooling, it's never as straight forward as you'd like. My component is as simple as:

import React from 'react';
import ReactDOM from 'react-dom';
import ReactTinyMCE from 'react-tinymce';

Then I just try to display using <ReactTinyMCE>

Thanks!

Community
  • 1
  • 1
Herman
  • 222
  • 1
  • 2
  • 10
  • Is the error occurring at run time or build time? – David L. Walsh Feb 01 '16 at 03:20
  • Run time. It builds fine. I even check the bundle and it doesn't include react in it, which is fine because I had it declared as an external dependency in browserify and browserify-shim. – Herman Feb 01 '16 at 05:54
  • Things worth checking: (1) Does `window.React` produce anything on the console? (2) Are the CDN scripts included before your bundle script in the HTML source? (3) If you inspect your transpiled code, is your React variable being assigned to `window.React`? – David L. Walsh Feb 01 '16 at 11:52
  • React isn't being assigned to window.React :( is there some sample configuration code in jspm, webpack, or browserify? Browserify should be as simple as browserify-shim and using externals in gulp if I'm bundling, right? – Herman Feb 01 '16 at 16:45

1 Answers1

1

This is what worked for me in my build. From webpack.config.js:

externals: {
    react: 'window.React',
    'react-dom': 'window.ReactDOM'
}

It produces the following in bundle.js:

/* 1 */
/***/ function(module, exports) {

    module.exports = window.React;

/***/ },

and:

/* 88 */
/***/ function(module, exports) {

    module.exports = window.ReactDOM;

/***/ }
David L. Walsh
  • 20,838
  • 7
  • 55
  • 45
  • I'm sticking with webpack :) I must be doing something wrong with jspm, but I just can't get it to work. Thank you! – Herman Feb 02 '16 at 18:07