fable-4 branch: Browser(.Dom) not found and uncaught exception

[houstonhaynes]

I'm going through the Elmish Book exercises to refresh (and re-trench a bit to eventually start using Avalonia.Elmish). I started on master which I figured would be bumpy with Fable 2 - and it didn't disappoint. (npm audit fix actually couldn't fix all of the issues). So I moved over to the fable-4-updates branch and it went more smoothly. However the "printMsg" exercise hits a "bump in the road"

It seems that it can't find/resolve Fable.Browser.Dom

PS C:\repos\fable-getting-started> npm start

> start
> dotnet fable watch ./src --runFast webpack-dev-server

Fable: F# to JS compiler 4.0.0-snake-island-alpha-021
Thanks to the contributor! @ericharding
Stand with Ukraine! https://standwithukraine.com.ua/

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

Started Fable compilation...
Fable compilation finished in 909ms

.\src\App.fs(3,6): (3,13) error FSHARP: The namespace or module 'Browser' is not defined. (code 39)
.\src\App.fs(5,22): (5,30) error FSHARP: The value, namespace, type or module document is not defined. (code 39) 
.\src\App.fs(7,1): (7,23) 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
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] Content not from webpack is served from C:\repos\fable-getting-started\dist directory 
asset main.js 213 KiB [emitted] (name: main)
runtime modules 27.2 KiB 12 modules
modules by path ./node_modules/ 163 KiB  modules by path ./node_modules/webpack-dev-server/client/ 57.4 KiB 12 modules        
  modules by path ./node_modules/webpack/hot/*.js 5.3 KiB
    ./node_modules/webpack/hot/dev-server.js 1.94 KiB [built] [code generated]
    ./node_modules/webpack/hot/log.js 1.86 KiB [built] [code generated]
    + 2 modules
  modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB
    ./node_modules/html-entities/lib/index.js 7.74 KiB [built] [code generated]        
    ./node_modules/html-entities/lib/named-references.js 72.7 KiB [built] [code generat
ed]                                                                                        + 2 modules
  ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]        
  ./node_modules/events/events.js 14.5 KiB [built] [code generated]
./src/App.fs.js 77 bytes [built] [code generated]
webpack 5.87.0 compiled successfully in 1030 ms       

And the browser shows an uncaught exception on refresh.

main.js:1305 [webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.
main.js:371 [HMR] Waiting for update signal from WDS...
main.js:3166 Uncaught 1
__webpack_require__ @ main.js:3166
(anonymous) @ main.js:4239
(anonymous) @ main.js:4241

[MangelMaxime]

Hello,

do you have package Fable.Browser.Dom installed?

[houstonhaynes]

Yes - definitely installed. It was somewhat surprising that I saw this error at all. In fact, I wasn't getting a prompt in VSCode that there was no reference for it, so it was more to the reason that this compilation error totally mystified me.

[houstonhaynes]

Just ran though this on another (Win11) machine. Worked as expected. Not sure what the issue is on the slab where the issue came from - but I'm content to close this out. Thanks for echoing back! 👍