Closed natalie-o-perret closed 1 year ago
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
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
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
Skimming through this again: https://github.com/fable-compiler/Fable/issues/3294#issuecomment-1356894498 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
./src/bin
./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
I ran into the same errors this morning. This should now be fixed when you update/re-install your locally installed template (#557).
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
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
[...]
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.
In order to enforce the Node version, you don't need a custom script.
If you create a
.npmrc
file withengine-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
Feliz.Template v4.3.0 is out 🚀 and it enforces node.js version 18
Hi there, came across a bit of an issue when following the quick-start section: https://github.com/Zaid-Ajaj/Feliz#quick-start It seems that, I can't start the template project as one might expect out-of-the-box:
Additionally, here is my version of resp. node and npm:
Any idea about what can be done?