Webpack bundling duplicate React dependencies?

[chadobado]

Burned through a bunch of hours trying to troubleshoot this.. seems to be an issue with the webpack config as far as I can tell. Any help would be greatly appreciated, thanks in advance.

Adding other react modules (ex: react-ui-tree) results in duplicate versions of React which causes invariant violations:

Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref.

Very hard to debug but eventually noticed the duplicate React inclusions:

Chads-iMac-5k:electron-react-boilerplate-test Chad$ npm run start-hot

> electron-react-boilerplate@0.2.9 start-hot /Users/Chad/Documents/Work/Dev/electron-react-boilerplate-test
> HOT=1 NODE_ENV=development electron .

[3637:0819/163228:INFO:renderer_main.cc(200)] Renderer process started
[3638:0819/163228:INFO:renderer_main.cc(200)] Renderer process started
[3635:0819/163228:INFO:CONSOLE(60)] "[HMR] Waiting for update signal from WDS...", source: webpack:///(webpack)/hot/dev-server.js? (60)
[3635:0819/163228:INFO:CONSOLE(109)] "Download the React DevTools for a better development experience: https://fb.me/react-devtools", source: webpack:///./~/react/lib/React.js? (109)
[3635:0819/163228:INFO:CONSOLE(109)] "Download the React DevTools for a better development experience: https://fb.me/react-devtools", source: /Users/Chad/Documents/Work/Dev/electron-react-boilerplate-test/node_modules/react/lib/React.js (109)
[3635:0819/163228:INFO:CONSOLE(15)] "[WDS] Hot Module Replacement enabled.", source: webpack:///(webpack)-dev-server/client? (15)

To reproduce:

git clone https://github.com/chentsulin/electron-react-boilerplate.git electron-react-boilerplate-test
cd electron-react-boilerplate-test
npm install
npm install react-ui-tree

Edit app/containers/HomePageContainer.jsx to include:

import React from 'react'
import { Link } from 'react-router'
import { Tree } from 'react-ui-tree'
...

Running..

npm run hot-dev-server
npm run start-hot

Tried many things w/o any success:

• Adding new webpack.optimize.DedupePlugin(),
• Adding an alias react: path.resolve('./node_modules/react')
• Etc

Again, thanks in advance for any help.

[chentsulin]

Oh, because webpack target electron will break some module including socket.io in webpack-dev-server, and then break whole hot loading. Now it's hard to configure which modules we should push into externals, which should not.

Should ignore:

• electron built-in (ipc, remote...)
• node built-in (see webpack/node-libs-browser)
• node 3rd party which can't build with webpack (mysql, mongodb, and so on..)

Should not ignore:

• front-end node_modules (especially which have react in peerDependencies)

We will need to figure out a new webpack target for electron-renderer, or parser package.json peerDependencies field for easier configuration.

For now, you can work around it with:

var nodeModules = fs.readdirSync('node_modules').filter(function(x) {
    return x !== '.bin' && x !== 'react' && x !== 'react-router' && 'react-ui-tree';
});

see also #31

[chadobado]

Thanks a lot @chentsulin, very helpful and your workaround addressed my problem in the interim.

Looks like a minor typo in your snippet, updating here for anyone else that might find this:

  var nodeModules = fs.readdirSync('node_modules').filter(function(x) {
    return x !== '.bin' && x !== 'react' && x !== 'react-router' && x !== 'react-ui-tree';
  });

Thanks again