prevent react from being bundled in my module so react can't exist twice

Question

I am writing a npm package that depend on :

"peerDependencies": {
  "react": "15.4.1",
},
"dependencies": {
  "classnames": "2.2.5",
  "react-onclickoutside": "5.8.3",
  "styled-components": "1.1.2"
}

I have added them as peer dependencies.

I have created a webpack build, and I've generated a 'umd' module that I want to import in my application.

The probleme is that a component from the module that depend on react-onclickoutside, complain about the presence of 2 React.

This is the code that can be toggled and generate this error :

DropDown = onClickOutside(DropDown, {
  handleClickOutside(instance) {
    return instance.closeMenu;
  },
});

This give me this error :

Error: Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: ....).(…)

If I look at my UMD module, I can see that my peer dependencies is bundled, this is probably why there is now two React in my application.

I would like to know how I can prevent webpack from bundling React react in my module

Answer 1

You can make use of the externals feature in webpack. Basically it will create the UMD module without bundling React, and assuming that it will be provided elsewhere