0

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

Dimitri Kopriwa
  • 13,139
  • 27
  • 98
  • 204

1 Answers1

2

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

luanped
  • 3,178
  • 2
  • 26
  • 40
  • So this is my other question : http://stackoverflow.com/questions/41349530/webpack2-how-to-exclude-react-and-react-dom-from-build – Dimitri Kopriwa Dec 27 '16 at 17:36