React standalone bundle without react library inside

Question

I have created standalone bundle which I include in React App. The App itself does not anything know about Extension Bundle (next XB) it load, but the XB does know about App and libraries it use inside. How to make App share library packages it compiled with to XB? I mean if the App compiled with React and React-dom libraries to make XB exclude from compile with such libraries and use them from the App instead?

I put into webpack config to exclude React from compiling:

var config = {
//....
    output: {
        library: 'videoEditor',
        libraryTarget: 'umd',
        path: BUILD_PATH+"./../bundles/",
       filename: '[name].bundle.js'
   },
// ...
}

// .... later just extending config if compiling as standalone
config.externals = Object.assign(config.externals,{'react':'React'});

Yes, that gives me on exit the Bundle without React library (so it size reduces from 190KB to 10KB). But if I try to load it I get an error:

index.js?7afc:1 Uncaught ReferenceError: require is not defined
    at eval (index.js?7afc:1)
    at Object.<anonymous> (video-editor.bundle.js:80)
    at __webpack_require__ (video-editor.bundle.js:30)
    at video-editor.bundle.js:73
    at video-editor.bundle.js:76
    at webpackUniversalModuleDefinition (video-editor.bundle.js:9)
    at video-editor.bundle.js:10

Without externals all is working ok.

index.js?7afc:1 is

import React from 'react';
import AppLayout from 'layouts/app';

There inside import React from 'react'; is coming as module.exports = require('react');

I do not understand how to make require work. Seems it is invisible for global space.

update: I have tried to change libraryTarget on any available option: 'umd', 'commonjs', 'this'. The result is the same.

I know about commonChunkPlugin from webpack but I have several separated projects from different sources they compile by different people.

Answer 1

Along with React, you also need to add ReactDOM in your externals from React v0.14.x onwards

externals: {
    // Use external version of React
    "react": "React",
    "react-dom": "ReactDOM"
},