error FSHARP: The namespace or module 'Fable' is not defined. (code 39)

[dotnetspec]

Description

I cloned the fable3-samples repo and attempted the first Easy project 'browser'. Following the instructions in Readme.md on 'npm start' I get the error above on the following import: Fable.Core.JsInterop I noted that Fable.Core.JsInterop is used in 12 of the sample apps (i.e. most of them).

Repro code

App.fs:

module App

open Fable.Core.JsInterop

let window = Browser.Dom.window

// Get our canvas context 
// As we'll see later, myCanvas is mutable hence the use of the mutable keyword
// the unbox keyword allows to make an unsafe cast. Here we assume that getElementById will return an HTMLCanvasElement 
let mutable myCanvas : Browser.Types.HTMLCanvasElement = unbox window.document.getElementById "myCanvas"  // myCanvas is defined in public/index.html

// Get the context
let ctx = myCanvas.getContext_2d()

// All these are immutables values
let w = myCanvas.width
let h = myCanvas.height
let steps = 20
let squareSize = 20

// gridWidth needs a float wo we cast tour int operation to a float using the float keyword
let gridWidth = float (steps * squareSize) 

// resize our canvas to the size of our grid
// the arrow <- indicates we're mutating a value. It's a special operator in F#.
myCanvas.width <- gridWidth
myCanvas.height <- gridWidth

// print the grid size to our debugger console
printfn "%i" steps

// prepare our canvas operations
[0..steps] // this is a list
  |> Seq.iter( fun x -> // we iter through the list using an anonymous function
      let v = float ((x) * squareSize) 
      ctx.moveTo(v, 0.)
      ctx.lineTo(v, gridWidth)
      ctx.moveTo(0., v)
      ctx.lineTo(gridWidth, v)
    ) 
ctx.strokeStyle <- !^"#ddd" // color

// draw our grid
ctx.stroke() 

// write Fable
ctx.textAlign <- "center"
ctx.fillText("Fable on Canvas", gridWidth * 0.5, gridWidth * 0.5)

printfn "done!"

.fsproj:

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <TargetFramework>netstandard2.0</TargetFramework>
  </PropertyGroup>
  <ItemGroup>
    <Compile Include="App.fs" />
  </ItemGroup>
  <ItemGroup>
    <PackageReference Include="Fable.Core" Version="4.3.0" />
    <PackageReference Include="Fable.Browser.Dom" Version="2.17.0" />
  </ItemGroup>
</Project>

i.e. all files as per repo.

Expected and actual results

Expected: Code compiles and runs in http://localhost:8080/

Actual:

...
Compiling src/App.fsproj...
F# compilation finished in 1054ms
Skipping Fable compilation of up-to-date JS files
~fable3-projects/browser/src/App.fs(3,6): (3,11) error FSHARP: The namespace or module 'Fable' is not defined. (code 39)
~fable3-projects/browser/src/App.fs(5,14): (5,21) error FSHARP: The value, namespace, type or module 'Browser' is not defined. (code 39)
~fable3-projects/browser/src/App.fs(10,24): (10,31) error FSHARP: The namespace or module 'Browser' is not defined. (code 39)
~fable3-projects/browser/src/App.fs(10,58): (10,63) error FSHARP: The value or constructor 'unbox' is not defined. (code 39)
~fable3-projects/browser/src/App.fs(22,17): (22,22) error FSHARP: The value or constructor 'float' is not defined. (code 39)
~fable3-projects/browser/src/App.fs(30,1): (30,8) error FSHARP: The value or constructor 'printfn' is not defined. (code 39)
~fable3-projects/browser/src/App.fs(34,6): (34,9) error FSHARP: The value, namespace, type or module 'Seq' is not defined. (code 39)
~fable3-projects/browser/src/App.fs(50,1): (50,8) error FSHARP: The value or constructor 'printfn' is not defined. (code 39)
Watching src

Related information

dotnet version: 8.0.303 fable-compiler version: 2.13.0 fable-core version: 4.3.0 Operating system: Linux Mint 21.3 Cinnamon

What is the issue and how do I resolve it? ... thanks ...

[MangelMaxime]

Hello,

The first thing that surprise me is that you are using Fable 2 and not Fable 3 or 4. (fable-compiler version: 2.13.0)

Please, note that the latest version of Fable is version 4.

I will look to update/fork the example to use Fable 4 instead of Fable 3.

While I do that, you can follow the instruction on Fable documentation to have a step by step tutorial on how to setup everything.

[dotnetspec]

Ok, thanks, updating to Fable 4 fixed it.