CODEWITHSUNDEEP
javascriptreactjswebpackjspm
Herman
Herman

Reputation: 240

Using webpack and jspm and external dependencies

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!

Upvotes: 1

Views: 550

Answers (1)

David L. Walsh
David L. Walsh

Reputation: 24825

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;

/***/ }

Upvotes: 1

Related Questions