search

Zaid-Ajaj / Feliz

A fresh retake of the React API in Fable and a collection of high-quality components to build React applications in F#, optimized for happiness
https://zaid-ajaj.github.io/Feliz/
MIT License
534 stars 78 forks source link

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

Closed natalie-o-perret closed 1 year ago

natalie-o-perret commented 1 year ago

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:

#  % natalie-perret @ nppc in ~\Desktop [12:35:56]
$ dotnet new -i Feliz.Template
Warning: use of 'dotnet new --install' is deprecated. Use 'dotnet new install' instead.
For more information, run:
   dotnet new install -h

The following template packages will be installed:
   Feliz.Template

Feliz.Template (version 4.1.0) is already installed, it will be replaced with latest version.
Feliz.Template::4.1.0 was successfully uninstalled.
Success: Feliz.Template::4.1.0 installed the following templates:
Template Name   Short Name  Language  Tags
--------------  ----------  --------  ------------------
Feliz template  feliz       F#        Fable/Elmish/React

#  % natalie-perret @ nppc in ~\Desktop [12:36:01]
$ dotnet new feliz -n MyProject
The template "Feliz template" was created successfully.

#  % natalie-perret @ nppc in ~\Desktop [12:36:07]
$ cd MyProject

#  % natalie-perret @ nppc in ~\Desktop\MyProject [12:36:08]
$ npm install
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@vitejs/plugin-react@3.1.0',
npm WARN EBADENGINE   required: { node: '^14.18.0 || >=16.0.0' },
npm WARN EBADENGINE   current: { node: 'v15.14.0', npm: '7.7.6' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'rollup@3.17.2',
npm WARN EBADENGINE   required: { node: '>=14.18.0', npm: '>=8.0.0' },
npm WARN EBADENGINE   current: { node: 'v15.14.0', npm: '7.7.6' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'vite@4.1.4',
npm WARN EBADENGINE   required: { node: '^14.18.0 || >=16.0.0' },
npm WARN EBADENGINE   current: { node: 'v15.14.0', npm: '7.7.6' }
npm WARN EBADENGINE }

added 77 packages, and 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:36:18]
$ 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! @battermann
Stand with Ukraine! https://standwithukraine.com.ua/

.> cmd /C node_modules\.bin\vite
Parsing src\App.fsproj...
src> cmd /C dotnet restore App.fsproj
failed to load config from C:\Users\natalie-perret\Desktop\MyProject\vite.config.js
error when starting dev server:
Error: Cannot find module 'node:path'
Require stack:
- C:\Users\natalie-perret\Desktop\MyProject\node_modules\vite\dist\node-cjs\publicUtils.cjs
- C:\Users\natalie-perret\Desktop\MyProject\node_modules\vite\index.cjs
- C:\Users\natalie-perret\Desktop\MyProject\vite.config.js
- C:\Users\natalie-perret\Desktop\MyProject\node_modules\vite\dist\node\chunks\dep-ca21228b.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:924:15)
    at Function.Module._load (node:internal/modules/cjs/loader:769:27)
    at Module.require (node:internal/modules/cjs/loader:996:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (C:\Users\natalie-perret\Desktop\MyProject\node_modules\vite\dist\node-cjs\publicUtils.cjs:3:14)
    at Module._compile (node:internal/modules/cjs/loader:1092:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
    at Object._require.extensions.<computed> [as .js] (file:///C:/Users/natalie-perret/Desktop/MyProject/node_modules/vite/dist/node/chunks/dep-ca21228b.js:62359:17)
    at Module.load (node:internal/modules/cjs/loader:972:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
  Determining projects to restore...
  Restored C:\Users\natalie-perret\Desktop\MyProject\src\App.fsproj (in 127 ms).
Project and references (3 source files) parsed in 2042ms

Started Fable compilation...
Fable compilation finished in 1148ms

.\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

Additionally, here is my version of resp. node and npm:

#  % natalie-perret @ nppc in ~\Desktop\MyProject [12:37:59] C:255
$ node --version
v15.14.0

#  % natalie-perret @ nppc in ~\Desktop\MyProject [12:38:01]
$ npm --version
7.7.6

Any idea about what can be done?

natalie-o-perret commented 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
natalie-o-perret commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 

# 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 commented 1 year ago

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

Zaid-Ajaj commented 1 year ago

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

natalie-o-perret commented 1 year ago

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

image

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 commented 1 year ago

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 commented 1 year ago

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

Zaid-Ajaj commented 1 year ago

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