redux-form v8.2.3 + react-redux v7.1.0 + react 16.8.6 + server-side rendering results in invalid hook call

[tstirrat15]

What is the current behavior?

When a reduxForm-wrapped component is on the render path on the server, you get an `Invariant violation: Invalid hook call."

Oddly, it doesn't exist on the frontend. I can work around the issue by lazy-loading the offending components and deferring them to the frontend.

Here's the full trace:

react_1          | { 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:
react_1          | 1. You might have mismatching versions of React and the renderer (such as React DOM)
react_1          | 2. You might be breaking the Rules of Hooks
react_1          | 3. You might have more than one copy of React in the same app
react_1          | See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
react_1          |     at invariant (/usr/src/app/node_modules/react/cjs/react.development.js:88:15)
react_1          |     at resolveDispatcher (/usr/src/app/node_modules/react/cjs/react.development.js:1436:28)
react_1          |     at useMemo (/usr/src/app/node_modules/react/cjs/react.development.js:1491:20)
react_1          |     at ConnectFunction (/usr/src/app/node_modules/react-redux/lib/components/connectAdvanced.js:131:41)
react_1          |     at processChild (/usr/src/app/build/webpack:/node_modules/react-dom/cjs/react-dom-server.node.development.js:2888:1)
react_1          |     at resolve (/usr/src/app/build/webpack:/node_modules/react-dom/cjs/react-dom-server.node.development.js:2812:1)
react_1          |     at ReactDOMServerRenderer.render (/usr/src/app/build/webpack:/node_modules/react-dom/cjs/react-dom-server.node.development.js:3202:1)
react_1          |     at ReactDOMServerRenderer.read (/usr/src/app/build/webpack:/node_modules/react-dom/cjs/react-dom-server.node.development.js:3161:1)
react_1          |     at renderToString (/usr/src/app/build/webpack:/node_modules/react-dom/cjs/react-dom-server.node.development.js:3646:1)
react_1          |     at /usr/src/app/build/webpack:/render.js:96:1
react_1          |     at process._tickCallback (internal/process/next_tick.js:68:7) name: 'Invariant Violation', framesToPop: 1 }

Is this a known issue/incompatibility with react-redux v7x? Is that one of the issues associated with #4431? Where in the render path would it be calling the hook code in connect? Are there other workarounds?

What is the expected behavior?

It'd be great if it rendered without an error.

What's your environment?

React: 16.8.6
react-redux: 7.1.0
redux-form: 8.2.3
node version: 10.15.1
environment: docker

[ViktorAksionov]

[email protected] has huge perf issue when you use it with redux-form@8, I use it in react-native app and it almost crashes after few typed chars in input field, rolled back to 7.0.3 fixed an issue. [email protected] is not ready yet to use with redux-form

[tstirrat15]

I rolled back to [email protected] and the issue is still present, except instead of complaining about hooks, it complains about being unable to find the store context:

react_1          | Invariant Violation: Could not find "store" in the context of "Connect(Form(WithStyles(BarePreferredDatesForm)))". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Form(WithStyles(BarePreferredDatesForm))) in connect options.
react_1          |     at invariant (/usr/src/app/node_modules/invariant/invariant.js:40:15)
react_1          |     at Connect.renderWrappedComponent (/usr/src/app/node_modules/react-redux/lib/components/connectAdvanced.js:172:32)
react_1          |     at Connect.indirectRenderWrappedComponent (/usr/src/app/node_modules/react-redux/lib/components/connectAdvanced.js:168:21)
react_1          |     at ReactDOMServerRenderer.render (/usr/src/app/build/webpack:/node_modules/react-dom/cjs/react-dom-server.node.development.js:3412:1)
react_1          |     at ReactDOMServerRenderer.read (/usr/src/app/build/webpack:/node_modules/react-dom/cjs/react-dom-server.node.development.js:3161:1)
react_1          |     at renderToString (/usr/src/app/build/webpack:/node_modules/react-dom/cjs/react-dom-server.node.development.js:3646:1)

Again, this only happens on the backend, and it only happens with redux-form's call of connect. My own components' calls to connect along that render path work just fine, indicating that it's not a question of the Provider being misconfigured.

It's also unlikely to be an interaction with any other provider, because even when a reduxForm-wrapped component is the direct child of the react-redux Provider, I'm still seeing the same issue.

[tstirrat15]

Interestingly, the issue seems to have more to do with React's context API and webpack than it does with this library specifically.

When I posted my last message, react and all react- packages were being bundled by webpack (i.e. not externalized), but redux-form was being externalized. Internalizing redux-form fixed the issue.

I'm still unclear on what the issue actually is, but it doesn't seem to be completely related to this library. I'll go ahead and close this.