Uncaught Error: Invalid hook call

[Overload119]

I still get this issue outlined in https://github.com/shakacode/react_on_rails/issues/1198

Uncaught Error: 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 resolveDispatcher (VM189 CSVUpl~b3fb07f8-2d153ed3c397a963035b.chunk.js:1678)
    at useState (VM189 CSVUpl~b3fb07f8-2d153ed3c397a963035b.chunk.js:1708)
    at CSVUploadBox (VM210 application~components-d90e1ebe4a0f7b4c2b8a.chunk.js:251)
    at renderWithHooks (VM191 Catego~345f6e1e-18710d2ab226f7e04fe0.chunk.js:14809)
    at mountIndeterminateComponent (VM191 Catego~345f6e1e-18710d2ab226f7e04fe0.chunk.js:17421)
    at beginWork (VM191 Catego~345f6e1e-18710d2ab226f7e04fe0.chunk.js:18501)
    at HTMLUnknownElement.callCallback (VM191 Catego~345f6e1e-18710d2ab226f7e04fe0.chunk.js:201)
    at Object.invokeGuardedCallbackDev (VM191 Catego~345f6e1e-18710d2ab226f7e04fe0.chunk.js:250)
    at invokeGuardedCallback (VM191 Catego~345f6e1e-18710d2ab226f7e04fe0.chunk.js:303)
    at beginWork$1 (VM191 Catego~345f6e1e-18710d2ab226f7e04fe0.chunk.js:23067)

package.json

"react": "16.14.0",
"react-dom": "16.14.0",
"react-on-rails": "12.0.4",

Component

function Component(props: Props): React.Node {
  const [v, setV] = useState(null);

  return (
    <div>Hello World</div>
  );
}

export default (props: Props, railsContext: any): (() => React.Node) => {
  return () => <Component {...{props, ...railsContext}} />;
};

This issue occurs when hitting back with Turbolinks on. The component renders fine the first time it is rendered, it's only when clicking back that there's an issue.

Stack Trace

render (VM196 Post~c721a44d-24a18852fae1482ccd1d.chunk.js:4704)
forEachReactOnRailsComponentInitialize (VM196 Post~c721a44d-24a18852fae1482ccd1d.chunk.js:4628)
reactOnRailsPageLoaded (VM196 Post~c721a44d-24a18852fae1482ccd1d.chunk.js:4749)
push../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (VM201 1-0bdf59c201646ca7d2a1.chunk.js:84)
r.notifyApplicationAfterRender (VM201 1-0bdf59c201646ca7d2a1.chunk.js:1001)
r.viewRendered (VM201 1-0bdf59c201646ca7d2a1.chunk.js:955)
e.renderView (VM201 1-0bdf59c201646ca7d2a1.chunk.js:504)
o.render (VM201 1-0bdf59c201646ca7d2a1.chunk.js:542)
e.render (VM201 1-0bdf59c201646ca7d2a1.chunk.js:502)
t.renderSnapshot (VM201 1-0bdf59c201646ca7d2a1.chunk.js:699)
t.render (VM201 1-0bdf59c201646ca7d2a1.chunk.js:695)
r.render (VM201 1-0bdf59c201646ca7d2a1.chunk.js:949)
(anonymous) (VM201 1-0bdf59c201646ca7d2a1.chunk.js:819)
(anonymous) (VM201 1-0bdf59c201646ca7d2a1.chunk.js:871)
requestAnimationFrame (async)
r.render (VM201 1-0bdf59c201646ca7d2a1.chunk.js:869)
r.loadResponse (VM201 1-0bdf59c201646ca7d2a1.chunk.js:815)
r.visitRequestCompleted (VM201 1-0bdf59c201646ca7d2a1.chunk.js:288)
r.requestCompletedWithResponse (VM201 1-0bdf59c201646ca7d2a1.chunk.js:832)
(anonymous) (VM201 1-0bdf59c201646ca7d2a1.chunk.js:172)
r.endRequest (VM201 1-0bdf59c201646ca7d2a1.chunk.js:206)
r.requestLoaded (VM201 1-0bdf59c201646ca7d2a1.chunk.js:169)
(anonymous) (VM201 1-0bdf59c201646ca7d2a1.chunk.js:152)
load (async)
r.createXHR (VM201 1-0bdf59c201646ca7d2a1.chunk.js:204)
r (VM201 1-0bdf59c201646ca7d2a1.chunk.js:158)
r.issueRequest (VM201 1-0bdf59c201646ca7d2a1.chunk.js:799)
r.visitStarted (VM201 1-0bdf59c201646ca7d2a1.chunk.js:282)
r.start (VM201 1-0bdf59c201646ca7d2a1.chunk.js:785)
r.startVisit (VM201 1-0bdf59c201646ca7d2a1.chunk.js:1011)
r.historyPoppedToLocationWithRestorationIdentifier (VM201 1-0bdf59c201646ca7d2a1.chunk.js:918)
r.onPopState (VM201 1-0bdf59c201646ca7d2a1.chunk.js:336)
(anonymous) (VM201 1-0bdf59c201646ca7d2a1.chunk.js:317)

[justin808]

@Overload119 Can you create a minimal reproduction case on Github? If so, I'll try to fix the issue.

Could you add turbolinks to this simple example: https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh ?

Note, the problem may relate to TurboLinks manually modifying the DOM which a no-no for React.

Please see the lines in this file that have "turbolinks": https://github.com/shakacode/react_on_rails/blob/master/node_package/src/clientStartup.ts#L230

Generally, the back button should be handled by react-router as that is made to work with React.

The problems reported here may relate to the particular version of React and TurboLinks.

Also, @Overload119 is your use case for a commercial product? If so, can you consider sponsorship? https://github.com/sponsors/shakacode and https://www.shakacode.com/react-on-rails-pro/?

I prioritize developer time for sponsor issues and requests.

[justin808]

@Overload119 please check #1162 and see if it's related.