React component bundled as an UMD can't load a dependency when imported via script tag in another react app

Question

I created a simple react component and I want to import it conditionally to another react app. I've managed to import it via HTML script tag and then get it from the window variable. The whole idea was working as long as react was being bundled in the module. I want to use the external react instance from the parent app, so I've configured webpack like this:

const path = require('path');
module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'module.js',
        library: 'test',
        libraryTarget: 'umd',
    },
    externals: {
        'react': {
            'commonjs': 'react',
            'commonjs2': 'react',
            'amd': 'react',
            'root': 'React'
        }
    }
};

edit: I've changed the externals to { react: 'React' } and in the parent app I've assigned the react to window.React variable.

const Test = (window as any).test.default
console.log(window.React)
console.log(Test)
return <Test />

The code above results in the same error.

{Children: {…}, Fragment: Symbol(react.fragment), Profiler: Symbol(react.profiler), Component: ƒ, PureComponent: ƒ, …}

ƒ (){return o.default.createElement("p",{style:{color:"green",fontWeight:"bold"}},"Hello, I come from an external module!")}

module.js:1 Uncaught TypeError: Cannot read property 'createElement' of undefined

SOLVED!
I've found out that the React instance has to be available in the window.React variable at the moment of loading UMD script. At first I've managed to get this to run by loading React from CDN before loading the script. Finally, I have decided to load the external component dynamically, after making sure window.React is available. It works as expected.

score 0 · Answer 1 · answered Apr 30 '20 at 07:30

0

Configure your externals object like this:

externals: { react: 'React' },

This will not include React in your bundle. Make sure the app in which you will be including this bundle, exports React in its window object. Usually in any react project, React instance is available in the window itself.

answered Apr 30 '20 at 07:30

Shivangi Khandelwal

113
1
1
12

I followed yout instruction and added the React to the window variable as in the post edit. Unfortunately it results with the same error. – czerwiukk Apr 30 '20 at 07:49
are you getting the value of window.React in your console.log ? – Shivangi Khandelwal Apr 30 '20 at 08:57
also, is the react and react-dom version in your parent app is same you were using in the other module – Shivangi Khandelwal Apr 30 '20 at 09:00
I get the value of window.React as in the added snippet. Im using the same versions of react. I'm not using react-dom, I'm only exporting a single paragaph. – czerwiukk Apr 30 '20 at 09:14

score 0 · Answer 2 · answered Jun 05 '20 at 10:55

0

Try using this once

externals: { react: 'window.React' }

answered Jun 05 '20 at 10:55

Shivangi Khandelwal

113
1
1
12

React component bundled as an UMD can't load a dependency when imported via script tag in another react app

2 Answers2