Hook-related breakage when upgrade from 7.7.0 to 9.4.0

Describe the bug This appears to be the same problem that was fixed for #1275

I upgraded my app from react-dnd 7.7.0 to react-dnd-cjs 9.4.0 and similarly for react-dnd-html5-backend (Using -cjs to avoid figuring out how to get electron-webpack & babel to transpile node_modules/react-dnd.*)

The only change I made was to rename DragDropContextProvider to DndProvider. Continuing to use the legacy wrapper API.

I’m getting this error:

Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component.
This could happen for one of the following reasons: 
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks 
3. You might have more than one copy of React in the Same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

at /Users/ronen/[REDACTED]/node_modules/react/cjs/react.development.js:1607:26
at resolveDispatcher (/Users/ronen/adobe/audio/ lex/project-lex-frontend/node_modules/react/cjs/ react.development.js:1610:5)
at Object.useEffect (/Users/ronen/adobe/audio/lex/ project-lex-frontend/node_modules/react/cjs/ react.development.js:1648:20)
at /Users/ronen/[REDACTED]/node_modules/react-dnd-cjs/lib/common/DndProvider.js:36:11
at renderWithHooks (webpack-internal:///./ node_modules/react-dom/c]s/react-dom.development.js:16320:18)
at updateFunctionComponent (webpackinternal:///./node_modules/react-dom/cjs/reactdom.development.js:18284:20)
at updateSimpleMemoComponent (webpackinternal:///./node_modules/react-dom/cjs/reactdom.development.js:18222:10)
at updateMemoComponent (webpack-internal:///./ node_modules/react-dom/c]s/react-dom.development.js:18125:14)
at beginWork$1 (webpack-internal:///. / node_modules/react-dom/c]s/react-dom.development.js:20170:16)
at HTMLUnknownElement.callCallback (webpackinternal:///./node_modules/react-dom/cjs/reactdom.development.js:362:14)

As addressed by #1277, this seems to be due to a call to Object.useEffect

Reproduction

Sorry, no small test case available

Expected behavior App should work exactly as before 😃

Desktop (please complete the following information):

MacOS 10.14.6 react 16.10.1 electron 6.0.11 electron-webpack 2.7.4 webpack 4.41.0

Additional context

For now I’m just sticking with ^7.7.0 and all’s good, since I’m not interested in the new features. I just wanted to upgrade so that I wouldn’t be 2 major versions out of date.

[andyengle]

@omniphx Thanks for sharing – I too ran into this problem and your solution worked for me as well.

[omniphx]

Ended up solving this issue by adding externals to my webpack.render.config.js as mentioned here: https://github.com/facebook/react/issues/13991#issuecomment-521903787

module.exports = {
  externals: [
    'react',
    'react-dom'
  ],

Looks like the issue was due to duplicate react instances. Seems to be a common issue with electron-webpack