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

Thanks for making this template available Roman! It looks really interesting, and the changes you've made appeal to some of my inclinations 🙂 Unfortunately, I seem to be having an issue with 3.0.0-pre-005 😐️

The template runs fine via dotnet run, but there is a compilation error that breaks intellisense in Rider, resulting in a less-than-ideal development experience.

Rider showing compilation error

Rider with lacking intellisense

This is from an unmodified SAFEr template. The sln build fails with the same error:

matt@matt-framework:~/dev$ dotnet new SAFEr -o SAFEr                                                                   
The template "SAFEr Web App v3.0.0-pre-005" was created successfully.

matt@matt-framework:~/dev$ cd SAFEr/
matt@matt-framework:~/dev/SAFEr$ dotnet tool restore
Tool 'paket' (version '7.1.5') was restored. Available commands: paket
Tool 'femto' (version '0.12.0') was restored. Available commands: femto
Tool 'fable' (version '4.0.0-theta-018') was restored. Available commands: fable

Restore was successful.
matt@matt-framework:~/dev/SAFEr$ dotnet build SAFEr.sln 
MSBuild version 17.4.1+9a89d02ff for .NET
  Determining projects to restore...
  Paket version 7.1.5+e2fe7c693356a5e70a74cc01501f7dc5f8996695
  Paket version 7.1.5+e2fe7c693356a5e70a74cc01501f7dc5f8996695
  Paket version 7.1.5+e2fe7c693356a5e70a74cc01501f7dc5f8996695
  Restoring /home/matt/dev/SAFEr/Build.fsproj
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Shared/SAFEr.Shared.fsproj
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Client/SAFEr.Client.fsproj
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Server/SAFEr.Server.fsproj
  Starting full restore process.
  Restoring /home/matt/dev/SAFEr/Build.fsproj
  Total time taken: 0 milliseconds
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Shared/SAFEr.Shared.fsproj
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Client/SAFEr.Client.fsproj
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Server/SAFEr.Server.fsproj
  The last restore was successful. Nothing left to do.
  Restoring /home/matt/dev/SAFEr/Build.fsproj
  Total time taken: 0 milliseconds
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Shared/SAFEr.Shared.fsproj
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Client/SAFEr.Client.fsproj
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Server/SAFEr.Server.fsproj
  The last restore was successful. Nothing left to do.
  Total time taken: 0 milliseconds
  Paket version 7.1.5+e2fe7c693356a5e70a74cc01501f7dc5f8996695
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Shared/SAFEr.Shared.fsproj
  Starting restore process.
  Total time taken: 0 milliseconds
  Restored /home/matt/dev/SAFEr/src/SAFEr.Shared/SAFEr.Shared.fsproj (in 141 ms).
  Restored /home/matt/dev/SAFEr/src/SAFEr.Server/SAFEr.Server.fsproj (in 141 ms).
  Restored /home/matt/dev/SAFEr/src/SAFEr.Client/SAFEr.Client.fsproj (in 141 ms).
  Paket version 7.1.5+e2fe7c693356a5e70a74cc01501f7dc5f8996695
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Shared/SAFEr.Shared.fsproj
  Starting restore process.
  Total time taken: 0 milliseconds
  SAFEr.Shared -> /home/matt/dev/SAFEr/src/SAFEr.Shared/bin/Debug/net7.0/SAFEr.Shared.dll
/home/matt/dev/SAFEr/src/SAFEr.Server/Startup.fs(11,9): warning FS0044: This construct is deprecated. InstrumentationKey based global ingestion is being deprecated. Use the AddApplicationInsightsTelemetry() overload which accepts Action<ApplicationInsightsServiceOptions> and set ApplicationInsightsServiceOptions.ConnectionString. See https://github.com/microsoft/ApplicationInsights-dotnet/issues/2560 for more details. [/home/matt/dev/SAFEr/src/SAFEr.Server/SAFEr.Server.fsproj]
FSC : error FS0193: The module/namespace 'Fable.React' from compilation unit 'Fable.React' did not contain the namespace, module or type 'ReactElement' [/home/matt/dev/SAFEr/src/SAFEr.Client/SAFEr.Client.fsproj]
  SAFEr.Server -> /home/matt/dev/SAFEr/src/SAFEr.Server/bin/Debug/net7.0/SAFEr.Server.dll

Build FAILED.

/home/matt/dev/SAFEr/src/SAFEr.Server/Startup.fs(11,9): warning FS0044: This construct is deprecated. InstrumentationKey based global ingestion is being deprecated. Use the AddApplicationInsightsTelemetry() overload which accepts Action<ApplicationInsightsServiceOptions> and set ApplicationInsightsServiceOptions.ConnectionString. See https://github.com/microsoft/ApplicationInsights-dotnet/issues/2560 for more details. [/home/matt/dev/SAFEr/src/SAFEr.Server/SAFEr.Server.fsproj]
FSC : error FS0193: The module/namespace 'Fable.React' from compilation unit 'Fable.React' did not contain the namespace, module or type 'ReactElement' [/home/matt/dev/SAFEr/src/SAFEr.Client/SAFEr.Client.fsproj]
    1 Warning(s)
    1 Error(s)

Time Elapsed 00:00:06.29

Seems to relate to https://github.com/Zaid-Ajaj/Feliz/issues/520. I've played around a bit with dependencies, but not found a solution yet. Any ideas?

Ah I've just found something in the Fable Gitter from Maxime, suggesting that downgrading to Fable.React 8 should help, and indeed it does get past that error, but results in a different error (again, dotnet run works fine).

matt@matt-framework:~/dev/SAFEr$ dotnet paket install
Paket version 7.1.5+e2fe7c693356a5e70a74cc01501f7dc5f8996695
Skipping resolver for group Build since it is already up-to-date
Resolving dependency graph...
Updated packages:
  Group: Main
    - Fable.React: 9.1 -> 8.0.1
    - Fable.ReactDom.Types: 18.0 (removed)
Installing into projects:
Created dependency graph (149 packages in total)
 - Project SAFEr.Client.fsproj needs to be restored
Calling dotnet restore on SAFEr.sln
  Determining projects to restore...
  Paket version 7.1.5+e2fe7c693356a5e70a74cc01501f7dc5f8996695
  Paket version 7.1.5+e2fe7c693356a5e70a74cc01501f7dc5f8996695
  Paket version 7.1.5+e2fe7c693356a5e70a74cc01501f7dc5f8996695
  The last full restore is still up to date. Nothing left to do.
  The last full restore is still up to date. Nothing left to do.
  Total time taken: 0 milliseconds
  The last full restore is still up to date. Nothing left to do.
  Total time taken: 0 milliseconds
  Total time taken: 0 milliseconds
  Paket version 7.1.5+e2fe7c693356a5e70a74cc01501f7dc5f8996695
  Paket version 7.1.5+e2fe7c693356a5e70a74cc01501f7dc5f8996695
  Paket version 7.1.5+e2fe7c693356a5e70a74cc01501f7dc5f8996695
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Shared/SAFEr.Shared.fsproj
  Starting restore process.
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Client/SAFEr.Client.fsproj
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Server/SAFEr.Server.fsproj
  Total time taken: 0 milliseconds
  Starting restore process.
  Total time taken: 0 milliseconds
  Starting restore process.
  Total time taken: 0 milliseconds
  Restored /home/matt/dev/SAFEr/src/SAFEr.Server/SAFEr.Server.fsproj (in 141 ms).
  Restored /home/matt/dev/SAFEr/src/SAFEr.Shared/SAFEr.Shared.fsproj (in 138 ms).
  Restored /home/matt/dev/SAFEr/src/SAFEr.Client/SAFEr.Client.fsproj (in 140 ms).
Total time taken: 10 seconds
matt@matt-framework:~/dev/SAFEr$ dotnet build SAFEr.sln 
MSBuild version 17.4.1+9a89d02ff for .NET
  Determining projects to restore...
  Paket version 7.1.5+e2fe7c693356a5e70a74cc01501f7dc5f8996695
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Shared/SAFEr.Shared.fsproj
  Starting restore process.
  Total time taken: 0 milliseconds
  All projects are up-to-date for restore.
  Paket version 7.1.5+e2fe7c693356a5e70a74cc01501f7dc5f8996695
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Shared/SAFEr.Shared.fsproj
  Starting restore process.
  Total time taken: 0 milliseconds
  SAFEr.Shared -> /home/matt/dev/SAFEr/src/SAFEr.Shared/bin/Debug/net7.0/SAFEr.Shared.dll
/home/matt/dev/SAFEr/src/SAFEr.Server/Startup.fs(11,9): warning FS0044: This construct is deprecated. InstrumentationKey based global ingestion is being deprecated. Use the AddApplicationInsightsTelemetry() overload which accepts Action<ApplicationInsightsServiceOptions> and set ApplicationInsightsServiceOptions.ConnectionString. See https://github.com/microsoft/ApplicationInsights-dotnet/issues/2560 for more details. [/home/matt/dev/SAFEr/src/SAFEr.Server/SAFEr.Server.fsproj]
/home/matt/dev/SAFEr/src/SAFEr.Client/Pages/Index.fs(31,9): error FS0041: No overloads match for method 'buttonGroup'.Known type of argument: Fable.React.ReactElement listAvailable overloads: - static member Daisy.buttonGroup: children: #seq<ReactElement> -> Fable.React.ReactElement // Argument 'children' doesn't match - static member Daisy.buttonGroup: elm: ReactElement -> Fable.React.ReactElement // Argument 'elm' doesn't match - static member Daisy.buttonGroup: float: float -> Fable.React.ReactElement // Argument 'float' doesn't match - static member Daisy.buttonGroup: int: int -> Fable.React.ReactElement // Argument 'int' doesn't match - static member Daisy.buttonGroup: props: IReactProperty list -> Fable.React.ReactElement // Argument 'props' doesn't match - static member Daisy.buttonGroup: string: string -> Fable.React.ReactElement // Argument 'string' doesn't match [/home/matt/dev/SAFEr/src/SAFEr.Client/SAFEr.Client.fsproj]
  SAFEr.Server -> /home/matt/dev/SAFEr/src/SAFEr.Server/bin/Debug/net7.0/SAFEr.Server.dll

Build FAILED.

/home/matt/dev/SAFEr/src/SAFEr.Server/Startup.fs(11,9): warning FS0044: This construct is deprecated. InstrumentationKey based global ingestion is being deprecated. Use the AddApplicationInsightsTelemetry() overload which accepts Action<ApplicationInsightsServiceOptions> and set ApplicationInsightsServiceOptions.ConnectionString. See https://github.com/microsoft/ApplicationInsights-dotnet/issues/2560 for more details. [/home/matt/dev/SAFEr/src/SAFEr.Server/SAFEr.Server.fsproj]
/home/matt/dev/SAFEr/src/SAFEr.Client/Pages/Index.fs(31,9): error FS0041: No overloads match for method 'buttonGroup'.Known type of argument: Fable.React.ReactElement listAvailable overloads: - static member Daisy.buttonGroup: children: #seq<ReactElement> -> Fable.React.ReactElement // Argument 'children' doesn't match - static member Daisy.buttonGroup: elm: ReactElement -> Fable.React.ReactElement // Argument 'elm' doesn't match - static member Daisy.buttonGroup: float: float -> Fable.React.ReactElement // Argument 'float' doesn't match - static member Daisy.buttonGroup: int: int -> Fable.React.ReactElement // Argument 'int' doesn't match - static member Daisy.buttonGroup: props: IReactProperty list -> Fable.React.ReactElement // Argument 'props' doesn't match - static member Daisy.buttonGroup: string: string -> Fable.React.ReactElement // Argument 'string' doesn't match [/home/matt/dev/SAFEr/src/SAFEr.Client/SAFEr.Client.fsproj]
    1 Warning(s)
    1 Error(s)

Time Elapsed 00:00:05.33

Rider showing compilation error "no overloads match..."

For some reason (possibly to do with Fable.React 8 and Fable.React.Types 18 both defining a ReactElement type?) it seems that dotnet doesn't think that the list produced from two calls to Daisy.button.button is compatible with a sequence of ReactElements that could be children of Daisy.buttonGroup.

I considered downgrading Feliz to v1 (compatible with Feliz.DaisyUI), but Feliz.Router 4.0 requires Feliz 2.3+. I don't have time to experiment further right now (and I'm not sure I should be downgrading all the packages 😆), but I might take a look later this week.

I've played about with trying to upgrade a local copy of Feliz.DaisyUI to use Feliz v2, but am running into a similar issue there too :thinking:

@MangelMaxime are you able to shed any light on how this might be resolved? No pressure obviously, given I'm mentioning you out of the blue in a repo you have no responsibility for :sweat_smile:.

Well there are a few thing that can go wrong:

If you use Fable 3, you need to lock Dotnet to version 6 See
If you use Feliz 2, you need to use Feliz updated dependencies which is not the case of latest version of Feliz.DaisyUI version 2.3.0 right now. So you can decide to downgrade to Feliz 1, and use only Feliz 1 compatble deps, you can downgrade Feliz.Router to a previous version for example
If you really want Feliz 2, you will probably need to open issues / contribute to update dependencies to it. I never did it myself but I don't think it should be too difficult. The main changes is probably that you need to change the namespace for finding ReactElement type you can look into Feliz to see how binding are created for React libraries.

Thanks so much for the speedy response @MangelMaxime! You're really going above and beyond 🙂

Not really one for you to resolve, just posting here in case anyone else wants to pull at this thread.

I've tried downgrading Feliz.Router to v3, which allows downgrading Feliz to v1 (which required a small tweak to App.fs in the client project). I also downgraded Fable.React to v8 for good measure.

The good news is that this fixes intellisense in Rider, but the dotnet build and fable build are now broken, even if I downgrade to Fable v3 and dotnet SDK version to v6 (including changing framework version in paket.dependencies, target framework in fsproj files and running a paket install).

FSC : error FS0193: The module/namespace 'Cmd' from compilation unit 'Fable.Elmish' did not contain the val 'ValLinkagePartialKey(ofSub)' [/home/matt/dev/SAFEr/src/SAFEr.Client/SAFEr.Client.fsproj]

client: ./src/SAFEr.Client/.fable-build/fable_modules/Feliz.Router.3.10.0/Router.fs(969,13): (969,18) error FSHARP: The value, constructor, namespace or type 'ofSub' is not defined. Maybe you want one of the following: ...

Think I've exhausted the avenues I can easily worth through @Dzoukr. Will probably leave this for now, which means I can't use the v3 template. I might experiment with the v2 template instead.

Thanks @MangelMaxime for response! Yup, this is still rather fresh (that's why it's pre-version) but when Fable 4 is out, the goal here is to start with the "all latest" - Fable, Feliz, React...

Hey @Dzoukr, yep makes sense - I understand that a pre-release version comes without any guarantees 🙂 I hope that this report helps as the v3 release moves closer.

I can confirm that I'm not facing this issue with v2.5.0 👍️

Thanks once again for putting this template together, I'm excited to try it out!

Dzoukr / SAFEr.Template

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