Upgrading to Fable 4

[JordanMarr]

I am taking a stab at upgrading a site from Fable 3.7.18 to 4.0.0-theta-016.

I've most build errors except I have a bunch of these:

The module/namespace 'Fable.React' from compilation unit 'Fable.React' did not contain the namespace, module or type 'ReactElement'	

and

The module/namespace 'Fable.React' from compilation unit 'Fable.React' did not contain the namespace, module or type 'IRefValue`1'

Here are my Fable project dependencies:

Any ideas on what I can try next?

[alfonsogarciacaro]

Yes, sorry, I'm trying a bit of a hacky way to parse net7.0 projects in theta-016 (see #3265) but it seems it still needs some tuning. I'll publish a new version shortly and will let you know, sorry for the hassle.

This project is not public, right? If it is, I can test it before pushing a new release to make sure everything works.

[JordanMarr]

Unfortunately it’s not public.

[alfonsogarciacaro]

No worries! I just released 4.0.0-theta-017. Can you please give it a try (when it's available in Nuget) and let me know if it works for you?

[dawedawe]

Hey @alfonsogarciacaro,
here's a minimal example to demonstrate the issue.

[alfonsogarciacaro]

Thanks a lot for providing the repro @dawedawe. As @MangelMaxime says below, this seems to be a problem with the dependencies. We've made some breaking changes in latest Fable.React so if you upgrade Feliz you have to upgrade Fable.React too. For now, the simplest way to upgrade to Fable 4 without changing many things in your app, it's updating only Feliz.CompilerPlugins which is the only part needed for Fable 4:

dotnet add package Feliz.CompilerPlugins --prerelease

I have sent a PR to fix the deps: dawedawe/MissingReactElementExample#1

[dawedawe]

Oh great, thanks a lot. That fixed it :)

[JordanMarr]

Some progress has been made: the dotnet tool fable build now compiles successfully!
However, I still have my original issue which is that the dotnet build fails in in Visual Studio (note the red squiggly shows up on the opening module rather than at a more specific point in the code):

I am able view the site after compiling to js, but I get the following js error for any page where I upgraded from Feliz.UseElmish to the new Fable.React.UseElmish:

react-dom.development.js?61bb:11340 
        
       Uncaught TypeError: Object(...) is not a function
    at React_useElmish_Z6C327F2E (Fable.React.UseElmish.fs.js?6f8c:87:32)
    at Page (TimesheetPage.fs.js?6b54:382:45)
    at renderWithHooks (react-dom.development.js?61bb:14985:1)
    at mountIndeterminateComponent (react-dom.development.js?61bb:17811:1)
    at beginWork (react-dom.development.js?61bb:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:3994:1)
    at invokeGuardedCallback (react-dom.development.js?61bb:4056:1)
    at beginWork$1 (react-dom.development.js?61bb:23964:1)
    at performUnitOfWork (react-dom.development.js?61bb:22776:1)
React_useElmish_Z6C327F2E @ Fable.React.UseElmish.fs.js?6f8c:87
Page @ TimesheetPage.fs.js?6b54:382
renderWithHooks @ react-dom.development.js?61bb:14985
mountIndeterminateComponent @ react-dom.development.js?61bb:17811
beginWork @ react-dom.development.js?61bb:19049
callCallback @ react-dom.development.js?61bb:3945
invokeGuardedCallbackDev @ react-dom.development.js?61bb:3994
invokeGuardedCallback @ react-dom.development.js?61bb:4056
beginWork$1 @ react-dom.development.js?61bb:23964
performUnitOfWork @ react-dom.development.js?61bb:22776
workLoopSync @ react-dom.development.js?61bb:22707
renderRootSync @ react-dom.development.js?61bb:22670
performSyncWorkOnRoot @ react-dom.development.js?61bb:22293
eval @ react-dom.development.js?61bb:11327
unstable_runWithPriority @ scheduler.development.js?3069:468
runWithPriority$1 @ react-dom.development.js?61bb:11276
flushSyncCallbackQueueImpl @ react-dom.development.js?61bb:11322
flushSyncCallbackQueue @ react-dom.development.js?61bb:11309
discreteUpdates$1 @ react-dom.development.js?61bb:22420
discreteUpdates @ react-dom.development.js?61bb:3756
dispatchDiscreteEvent @ react-dom.development.js?61bb:5889

[MangelMaxime]

@alfonsogarciacaro

It seems like @JordanMarr is using Fable.React 9 and Elmish v4, isn't problem related to ReactElement not found in Fable.React due to the fact that not all dependencies are updated to Fable.React 9 ?

[JordanMarr]

Still the same problem. 😓

This shows at the top of every React module in the project:

[JordanMarr]

I think the problem is that my own Fable NuGet packages are out of date. 🙈

[JordanMarr]

Confirmed! I had to update three of my NuGet packages to resolve the issue. Everything is working now. 🎉