Comments (10)
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
from feliz.
Feliz.Template v4.3.0 is out 🚀 and it enforces node.js version 18
from feliz.
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
from feliz.
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
from feliz.
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
from feliz.
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
from feliz.
I ran into the same errors this morning. This should now be fixed when you update/re-install your locally installed template (#557).
from feliz.
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
[...]
from feliz.
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.
from feliz.
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
from feliz.
Related Issues (20)
- Q: Documentation on breaking changes in 2.6? [WAS Updating Feliz.UseListener to Feliz 2.6.0] HOT 4
- CSS overflow-anchor property HOT 1
- Error with Feliz 2.7 HOT 2
- Making UseElmish's dispatch function stable
- Feliz.Markdown escapeHtml doesn't seem to work HOT 1
- UseElmish: Failed to resolve import "use-sync-external-store/shim" HOT 3
- `react-markdown` removes the `escapeHtml` property HOT 1
- Clarification and Potential Improvement on PR #480 useEffectOnce behavior HOT 5
- Expanding Feliz.Rechart HOT 3
- Component created with a forwardRef that has generic type parameters loses state HOT 2
- "Directory import use-sync-external-store\shim is not supported" in UseElmish.fs.js HOT 2
- Use with Elmish documentation is lacking integration HOT 2
- Enhance Handling of F# Record Types as Props in ReactComponent Attribute HOT 4
- Explore if Feliz.CompilerPlugin can support POJO made using `[<ParamObject>]`
- prop.pattern produces invalid html HOT 4
- React 19 HOT 4
- Svg attribute `fill-rule` missing
- Update tests and move to github actions [Contributions Welcome]
- Doc changes havent been pushed to site HOT 1
- Feliz.popover auto positioning does not work
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from feliz.