Feliz.Template v4.x - The namespace or module 'Fable' is not defined

[natalie-o-perret]

Feliz.Template v4.x - The namespace or module 'Fable' is not defined

[Zaid-Ajaj]

Hi @natalie-o-perret it's my bad! Feliz.Template v4.1 was using Fable v3.x which doesn't understand net7.0 projects, I updated it this morning to v4.2 which updates fable to v4.0.0-theta-018 (latest) please give that a try.

The first error message suggests that your node version might be old (you need node v18+ lts) . That is something i think we can enforce in the template

[Zaid-Ajaj]

Feliz.Template v4.3.0 is out 🚀 and it enforces node.js version 18

[natalie-o-perret]

Changing the node version using nvm from 15.14.0 to 18.6.0 partially resolved the errors.

#  % natalie-perret @ nppc in ~\Desktop\MyProject [12:41:05]
$ nvm use 18.6.0
Now using node v18.6.0 (64-bit)

#  % natalie-perret @ nppc in ~\Desktop\MyProject [12:41:21] C:255
$ npm install

up to date, audited 78 packages in 1s

8 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

#  % natalie-perret @ nppc in ~\Desktop\MyProject [12:41:26]
$ npm start

> start
> dotnet tool restore && dotnet fable watch src --runFast vite

Tool 'fable' (version '3.7.17') was restored. Available commands: fable
Tool 'femto' (version '0.17.1') was restored. Available commands: femto

Restore was successful.
Fable: F# to JS compiler 3.7.17
Thanks to the contributor! @markek
Stand with Ukraine! https://standwithukraine.com.ua/

.> cmd /C node_modules\.bin\vite
Parsing src\App.fsproj...
Retrieving project options from cache, in case of issues run `dotnet fable clean` or try `--noCache` option.
Project and references (3 source files) parsed in 154ms

Started Fable compilation...
Fable compilation finished in 1125ms

.\src\Extensions.fs(5,6): (5,11) error FSHARP: The namespace or module 'Fable' is not defined. (code 39)
.\src\Extensions.fs(6,6): (6,11) error FSHARP: The namespace or module 'Fable' is not defined. (code 39)
.\src\Extensions.fs(12,49): (12,62) error FSHARP: The value or constructor 'importDefault' is not defined. (code 39)
.\src\Extensions.fs(20,11): (20,15) error FSHARP: The type 'Emit' is not defined. (code 39)
.\src\Extensions.fs(24,38): (24,51) error FSHARP: The value or constructor 'importDefault' is not defined. (code 39)
.\src\Components.fs(3,6): (3,11) error FSHARP: The namespace or module 'Feliz' is not defined. (code 39)
.\src\Components.fs(4,6): (4,11) error FSHARP: The namespace or module 'Feliz' is not defined. (code 39)
.\src\Components.fs(11,7): (11,21) error FSHARP: The type 'ReactComponent' is not defined. (code 39)
.\src\Components.fs(12,34): (12,38) error FSHARP: The value, namespace, type or module 'Html' is not defined. (code 39)
.\src\Components.fs(17,7): (17,21) error FSHARP: The type 'ReactComponent' is not defined. (code 39)
.\src\Components.fs(19,33): (19,38) error FSHARP: The value, namespace, type or module 'React' is not defined. (code 39)
.\src\Components.fs(20,9): (20,13) error FSHARP: The value, namespace, type or module 'Html' is not defined. (code 39)
.\src\Components.fs(32,7): (32,21) error FSHARP: The type 'ReactComponent' is not defined. (code 39)
.\src\Components.fs(34,39): (34,44) error FSHARP: The value, namespace, type or module 'React' is not defined. (code 39)
.\src\Components.fs(35,9): (35,14) error FSHARP: The value, namespace, type or module 'React' is not defined. (code 39)
.\src\Main.fs(3,6): (3,11) error FSHARP: The namespace or module 'Feliz' is not defined. (code 39)
.\src\Main.fs(5,6): (5,13) error FSHARP: The namespace or module 'Browser' is not defined. (code 39)
.\src\Main.fs(7,12): (7,20) error FSHARP: The value, namespace, type or module 'ReactDOM' is not defined. (code 39)
.\src\Main.fs(8,1): (8,12) error FSHARP: Lookup on object of indeterminate type based on information prior to this program point. A type annotation may be needed prior to this program point to constrain the type of the object. This may allow the lookup to be resolved. (code 72)
Watching src

  VITE v4.1.4  ready in 2314 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

[natalie-o-perret]

Using dotnet fable clean as suggested here wasn't enough to get rid of the leftover of errors:

# natalie-perret @ nppc in ~\Desktop\MyProject [12:47:28]
$ dotnet fable clean
Fable: F# to JS compiler 3.7.17
Thanks to the contributor! @Krzysztof-Cieslak
Stand with Ukraine! https://standwithukraine.com.ua/

This will recursively delete all *.fs.js[.map] files in C:\Users\natalie-perret\Desktop\MyProject
Please press 'Y' or 'y' if you want to continue:
Y
Deleted src\fable_modules
Clean completed! Files deleted: 2

# natalie-perret @ nppc in ~\Desktop\MyProject [12:47:44]
$ npm install

up to date, audited 78 packages in 2s

8 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

# natalie-perret @ nppc in ~\Desktop\MyProject [12:47:50]
$ npm start

> start
> dotnet tool restore && dotnet fable watch src --runFast vite

Tool 'fable' (version '3.7.17') was restored. Available commands: fable
Tool 'femto' (version '0.17.1') was restored. Available commands: femto

Restore was successful.
Fable: F# to JS compiler 3.7.17
Thanks to the contributor! @xdaDaveShaw
Stand with Ukraine! https://standwithukraine.com.ua/

.> cmd /C node_modules\.bin\vite
Parsing src\App.fsproj...
src> cmd /C dotnet restore App.fsproj
  Determining projects to restore...

  VITE v4.1.4  ready in 596 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
  Restored C:\Users\natalie-perret\Desktop\MyProject\src\App.fsproj (in 125 ms).
Project and references (3 source files) parsed in 2037ms

Started Fable compilation...
Fable compilation finished in 1132ms

.\src\Extensions.fs(5,6): (5,11) error FSHARP: The namespace or module 'Fable' is not defined. (code 39)
.\src\Extensions.fs(6,6): (6,11) error FSHARP: The namespace or module 'Fable' is not defined. (code 39)
.\src\Extensions.fs(12,49): (12,62) error FSHARP: The value or constructor 'importDefault' is not defined. (code 39)
.\src\Extensions.fs(20,11): (20,15) error FSHARP: The type 'Emit' is not defined. (code 39)
.\src\Extensions.fs(24,38): (24,51) error FSHARP: The value or constructor 'importDefault' is not defined. (code 39)
.\src\Components.fs(3,6): (3,11) error FSHARP: The namespace or module 'Feliz' is not defined. (code 39)
.\src\Components.fs(4,6): (4,11) error FSHARP: The namespace or module 'Feliz' is not defined. (code 39)
.\src\Components.fs(11,7): (11,21) error FSHARP: The type 'ReactComponent' is not defined. (code 39)
.\src\Components.fs(12,34): (12,38) error FSHARP: The value, namespace, type or module 'Html' is not defined. (code 39)
.\src\Components.fs(17,7): (17,21) error FSHARP: The type 'ReactComponent' is not defined. (code 39)
.\src\Components.fs(19,33): (19,38) error FSHARP: The value, namespace, type or module 'React' is not defined. (code 39)
.\src\Components.fs(20,9): (20,13) error FSHARP: The value, namespace, type or module 'Html' is not defined. (code 39)
.\src\Components.fs(32,7): (32,21) error FSHARP: The type 'ReactComponent' is not defined. (code 39)
.\src\Components.fs(34,39): (34,44) error FSHARP: The value, namespace, type or module 'React' is not defined. (code 39)
.\src\Components.fs(35,9): (35,14) error FSHARP: The value, namespace, type or module 'React' is not defined. (code 39)
.\src\Main.fs(3,6): (3,11) error FSHARP: The namespace or module 'Feliz' is not defined. (code 39)
.\src\Main.fs(5,6): (5,13) error FSHARP: The namespace or module 'Browser' is not defined. (code 39)
.\src\Main.fs(7,12): (7,20) error FSHARP: The value, namespace, type or module 'ReactDOM' is not defined. (code 39)
.\src\Main.fs(8,1): (8,12) error FSHARP: Lookup on object of indeterminate type based on information prior to this program point. A type annotation may be needed prior to this program point to constrain the type of the object. This may allow the lookup to be resolved. (code 72)
Watching src

[natalie-o-perret]

A thing that I've found a lil' weird is that building the very same project via dotnet build doesn't yield any error comparatively to when it's achieved through npm start:

# natalie-perret @ nppc in ~\Desktop\MyProject [12:50:14] C:255
$ dotnet build
MSBuild version 17.4.1+fedecea9d for .NET
  Determining projects to restore...
  All projects are up-to-date for restore.
  App -> C:\Users\natalie-perret\Desktop\MyProject\src\bin\Debug\net7.0\App.dll

Build succeeded.
    0 Warning(s)
    0 Error(s)

Time Elapsed 00:00:03.00

[natalie-o-perret]

Skimming through this again:
fable-compiler/Fable#3294 (comment)
I wanted to force everything to .NET 6 LTS.

So I ended up adding a .\global.json file right next to the solution file:

{
    "sdk": {
        "version": "6.0.0",
        "rollForward": "latestMinor"
    }
}

and

and changing the project file .\src\App.fsproj as follows:

<Project Sdk="Microsoft.NET.Sdk">
    <PropertyGroup>
        <TargetFramework>net6.0</TargetFramework>
    </PropertyGroup>
[...]

Then

• Delete ./src/bin
• Delete ./src/obj
• dotnet fable clean + Y
• npm install
• npm start

# natalie-perret @ nppc in ~\Desktop\MyProject [13:01:42]
$ npm start

> start
> dotnet tool restore && dotnet fable watch src --runFast vite

Tool 'fable' (version '3.7.17') was restored. Available commands: fable
Tool 'femto' (version '0.17.1') was restored. Available commands: femto

Restore was successful.
Fable: F# to JS compiler 3.7.17
Thanks to the contributor! @2sComplement
Stand with Ukraine! https://standwithukraine.com.ua/

.> cmd /C node_modules\.bin\vite
Parsing src\App.fsproj...
src> cmd /C dotnet restore App.fsproj
  Determining projects to restore...

  VITE v4.1.4  ready in 555 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
  Restored C:\Users\natalie-perret\Desktop\MyProject\src\App.fsproj (in 136 ms).
Some Nuget packages contain information about NPM dependencies that can be managed by Femto: https://github.com/Zaid-Ajaj/Femto
Project and references (35 source files) parsed in 1962ms

Started Fable compilation...
Fable compilation finished in 4802ms                                                

Watching src

Stopped triggering errors.

However, when checking out what is being exposed at http://localhost:5173
The dev tool console shows:

[vite] connecting... [client.ts:19:8](http://localhost:5173/@vite/client.ts)
[vite] connected. [client.ts:134:14](http://localhost:5173/@vite/client.ts)
Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools [react-dom.development.js:29840:16](http://localhost:5173/@fs/C:/Users/natalie-perret/Desktop/MyProject/node_modules/react-dom/cjs/react-dom.development.js)
Warning: 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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. [react.development.js:209:29](http://localhost:5173/@fs/C:/Users/natalie-perret/Desktop/MyProject/node_modules/react/cjs/react.development.js)
    React 4
    Feliz_React__React_useState_Static_1505 React.fs.js:391
    Components_Counter Components.fs.js:27
    <anonymous> Main.fs.js:6
Uncaught TypeError: dispatcher is null
    useState React
    Feliz_React__React_useState_Static_1505 React.fs.js:391
    Components_Counter Components.fs.js:27
    <anonymous> Main.fs.js:6
[react.development.js:1622:2](http://localhost:5173/@fs/C:/Users/natalie-perret/Desktop/MyProject/node_modules/react/cjs/react.development.js)
    useState React
    Feliz_React__React_useState_Static_1505 React.fs.js:391
    Components_Counter Components.fs.js:27
    <anonymous> Main.fs.js:6

[panmona]

I ran into the same errors this morning. This should now be fixed when you update/re-install your locally installed template (#557).

[natalie-o-perret]

Hi @natalie-o-perret it's my bad! Feliz.Template v4.1 was using Fable v3.x which doesn't understand net7.0 projects, I updated it this morning to v4.2 which updates fable to v4.0.0-theta-018 (latest) please give that a try.

It now works like a charm!

#  % natalie-perret @ nppc in ~\Desktop\MyProject [15:48:30]
$ dotnet new --uninstall Feliz.Template
Success: Feliz.Template::4.1.0 was uninstalled.

#  % natalie-perret @ nppc in ~\Desktop\MyProject [15:48:57]
$ dotnet new --install Feliz.Template
The following template packages will be installed:
   Feliz.Template

Success: Feliz.Template::4.2.0 installed the following templates:
Template Name   Short Name  Language  Tags
--------------  ----------  --------  ------------------
Feliz template  feliz       F#        Fable/Elmish/React

# natalie-perret @ nppc in ~\Desktop\MyProject [16:55:20]
$ npm install

added 77 packages, and audited 78 packages in 3s

8 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

# natalie-perret @ nppc in ~\Desktop\MyProject [16:55:31]
$ npm start

> start
> dotnet tool restore && dotnet fable watch src --runFast vite

Tool 'fable' (version '4.0.0-theta-018') was restored. Available commands: fable
Tool 'femto' (version '0.17.1') was restored. Available commands: femto

Restore was successful.
Fable: F# to JavaScript compiler 4.0.0-theta-018 (status: beta)
Thanks to the contributor! @davidtme
Stand with Ukraine! https://standwithukraine.com.ua/

.> cmd /C node_modules\.bin\vite
Parsing src\App.fsproj...
src> cmd /C dotnet restore App.csproj -p:FABLE_COMPILER=true -p:FABLE_COMPILER_4=true -p:FABLE_COMPILER_JAVASCRIPT=true
  Determining projects to restore...
  Restored C:\Users\natalie-perret\Desktop\MyProject\src\App.csproj (in 177 ms).
Some Nuget packages contain information about NPM dependencies that can be managed by Femto: https://github.com/Zaid-Ajaj/Femto
Project and references (35 source files) parsed in 2532ms


  VITE v4.1.4  ready in 2582 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
Loaded Feliz.HookAttribute from ..\..\.nuget\packages\feliz.compilerplugins\2.0.0\lib\netstandard2.0\Feliz.CompilerPlugins.dll
Loaded Feliz.ReactComponentAttribute from ..\..\.nuget\packages\feliz.compilerplugins\2.0.0\lib\netstandard2.0\Feliz.CompilerPlugins.dllLoaded Feliz.ReactMemoComponentAttribute from ..\..\.nuget\packages\feliz.compilerplugins\2.0.0\lib\netstandard2.0\Feliz.CompilerPlugins.dllStarted Fable compilation...Fable compilation finished in 6674ms

Watching src

About

The first error message suggests that your node version might be old (you need node v18+ lts) . That is something i think we can enforce in the template

I've actually mentioned this in another issue, though, I thought at the time it was the other way around (thought we needed an older version), but the template might benefit from something like that in the package.json:

[...]
  "engines": {
    "node": ">=18" // intentionally so big version number
  },
  "engineStrict": true
[...]

[MangelMaxime]

In order to enforce the Node version, you don't need a custom script.

If you create a .npmrc file with engine-strict=true in it then the check will be made out of the box by Node.js/Npm.

[natalie-o-perret]

In order to enforce the Node version, you don't need a custom script.

If you create a .npmrc file with engine-strict=true in it then the check will be made out of the box by Node.js/Npm.

Thanks for the pointer, I think that would really help to make the template easier for devs who don't have a node version that isn't suitable to run Feliz just like what @Zaid-Ajaj mentioned the other day:

(you need node v18+ lts) . That is something i think we can enforce in the template