Multiple copies of React in my Application

Question

I am using react-treelist component and inside that i am using office-ui-fabric callout(its like a tooltip) component to have a tooltip on elements in tree structure when i am running this program it runs correctly but when i am bundling and using the bundle file in my project as a module it gives error:-

Exception in Layer.componentDidUpdate(): Invariant Violation: addComponentAsRefTo(...): 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

I have tried many solutions from diff forum but none of them worked.I am sure problem is of multiple copies of react.

Details of what i did

I cloned react-treelist from github then i installed office-ui-fabric module then i changed some code to make callout component work with react-treelist, i did npm start it worked fine the i did npm run dist and copied the bundle file to my project directory inside a folder named react-treelist and then imported that file as module in my code and ran the code it gave me the above error.

Can anybody suggest me how to accomplish the above task without having multiple copies of react in my application

Thai · Accepted Answer · 2017-03-25 15:13:51Z

1

If you use webpack to build your application, you can use the resolve.alias configuration option to make sure that all modules refer to the same react library:

  resolve: {
    alias: {
      'react': fs.realpathSync('node_modules/react'),
      'react-dom': fs.realpathSync('node_modules/react-dom')
    }
  }

answered Mar 25, 2017 at 15:13

Thai

11.5k2 gold badges49 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mukesh Kumar Over a year ago

Thanks for answering I tried your solution but it didn't work Also i tried this resolve: { extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"], alias: { react: path.join(__dirname, 'node_modules', 'react') }

Banana · Accepted Answer · 2018-06-25 09:49:07Z

1

If you use web pack then you can fix it by adding the following to Webpack config

externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
}

edited Jun 25, 2018 at 9:49

Banana

2,4438 gold badges37 silver badges62 bronze badges

answered Jun 25, 2018 at 7:34

mitesh7172

6961 gold badge11 silver badges21 bronze badges

1 Comment

Abubakar Sambo Over a year ago

and if you don't use webpack?

Collectives™ on Stack Overflow

Multiple copies of React in my Application

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related