React 18.2

[Nexus452]

Description

Hi,

I recently updated to the latest Fable/Elmish/React packages and upgraded from react 17.0.2 to 18.2 After this upgrade the following error occurred :

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

After ruling out all 3 possible errors, I recreated a project from scratch (Based on the SAFE template), upgraded and re created the same error.

I came here after reading this article https://fable.io/blog/2022/2022-10-13-use-elmish.html but I am not certain it is the right place. I looked at these sample https://github.com/alfonsogarciacaro/fable-react-sample/blob/3fc0f5ca2411432d3a34e12344fcca2a4ba6a4ce/src/TodoMVC.fs#L198 but I am not sure what to make of it since it's slightly different (based on JSX.Component)

Thanks

Repro code

https://github.com/Nexus452/SAFE-node18.2-elmish-react

Expected and actual results

Please provide the expected and actual results.

Related information

• elmish version:
• fable-compiler version:
• fable-core version: 4.0.0
• Operating system: Windows

[MangelMaxime]

Hello @Nexus452,

Feliz 2 requires Fable 4 in order to work.

In theory, Fable should complain that the loaded plugin doesn't meet the required version but in the past I had the feeling the check was incorrect. Your issue seems to confirm that problem.

[Nexus452]

Thanks for checking, I have re run paket to check the versions :

- Fable.AST: 4.2.1 (added)
- Fable.Browser.Blob: 1.3.0 (added)
- Fable.Browser.Dom: 2.14.0 (added)
- Fable.Browser.Event: 1.5.0 (added)
- Fable.Browser.Gamepad: 1.2.0 (added)
- Fable.Browser.WebStorage: 1.2.0 (added)
- Fable.Browser.XMLHttpRequest: 1.3.0 (added)
- Fable.Core: 4.0.0 (added)
- Fable.Elmish: 4.0.1 (added)
- Fable.Elmish.Debugger: 4.0.0 (added)
- Fable.Elmish.HMR: 7.0.0 (added)
- Fable.Elmish.React: 4.0.0 (added)
- Fable.Mocha: 2.16.0 (added)
- Fable.Parsimmon: 4.1.0 (added)
- Fable.React: 9.3.0 (added)
- Fable.React.Types: 18.3.0 (added)
- Fable.React.UseElmish: 1.0.0-beta-001 (added)
- Fable.ReactDom.Types: 18.2.0 (added)
- Fable.Remoting.Client: 7.25.0 (added)
- Fable.Remoting.Giraffe: 5.14.0 (added)
- Fable.Remoting.Json: 2.23.0 (added)
- Fable.Remoting.MsgPack: 1.18.0 (added)
- Fable.Remoting.Server: 5.32.0 (added)
- Fable.SimpleJson: 3.24.0 (added)
- Feliz: 2.6.0 (added)
- Feliz.Bulma: 3.0.0 (added)
- Feliz.CompilerPlugins: 2.2.0 (added)
- FParsec: 1.1.1 (added)
- FSharp.Control.Reactive: 5.0.5 (added)
- FSharp.Control.Websockets: 0.2.3 (added)
- FSharp.Core: 6.0.7 (added)
- Fulma: 3.0.0 (added) 

[MangelMaxime]

Fable is not managed by paket but by dotnet tool so you need to run dotnet tool update fable to update to latest version.

Or downgrade your dependencies to use Feliz 1

[Nexus452]

Worked after upgrade ! Awesome thanks !