How to manage webpack umd module dependencies (or create peerDependencies)

Question

I have created with webpack a UMD module, the content (without compression) start with :

(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    define("bootstrap-styled", [], factory);
  else if(typeof exports === 'object')
    exports["bootstrap-styled"] = factory();
  else
    root["bootstrap-styled"] = factory();
})(this, function() {

This library depend on react and for a signel Component within this library : react-dom (through react-onclickoutside package).

When I build this library with webpack and try to use it in a project. I have an error complaining about two copies of React, the second one has been bundled.

So I need to know what I am expecting as a Umd module.

I don't want to have React built, I want React to be a peer dependencies.

Am I supposed to see react as a parameter of this umd module ?

From a React application, how can I load this module ?

How do I exclude React? I have tried most of the documentations examples.

Answer 1

This is possible by using the externals property. When externals are specified, they will be added as arguments inside of the UMD wrapper.

You can reference this new guide from our new docs page!!