Cannot get Fable-lit samples running.

[kaeedo]

Hi. I've been trying to use Perla in my own project, and thought I would run the samples first to see how it works. However I can't get fable-sutil or fable-lit examples to work after simply running dotnet tool restore and dotnet perla serve with following error message in the browser console: Uncaught TypeError: Error resolving module specifier “lit”. Relative module specifiers must start with “./”, “../” or “/”. I was also getting the same error when trying out my own fable bindings library that I managed to get working with Vite.

If I understood correctly, this is the reason the es-module-shim is needed. However there still seems to be some issue.

Thanks,

[AngelMunoz]

Hello! thanks for trying Perla out!

If I understood correctly, this is the reason the es-module-shim is needed. However there still seems to be some issue.

Yes, the es-module-shims are necessary for other browsers that are not chromium

In the case you have cloned the repository manually or something else it would be nice if you could provide me with a reproduction repository just to ensure something is not missing

Otherwise I recommend you using perla as a global tool and using the perla new command

You have to run this on the first install perla init -k full

PS C:\Users\scyth\repos> perla new -t perla-samples/fable-sutil -n sample
PS C:\Users\scyth\repos> cd sample
PS C:\Users\scyth\repos\sample> dotnet tool restore
Tool 'perla' (version '0.20.0') was restored. Available commands: perla
Tool 'fable' (version '3.6.3') was restored. Available commands: fable

Restore was successful.
PS C:\Users\scyth\repos\sample> dotnet perla serve
Checking whether esbuild is present...
esbuild is present.
Starting Dev Server
Starting Fable
Perla: Fable: F# to JS compiler 3.6.3
Perla: Thanks to the contributor! @davedawkins
Perla: Parsing src\App.fsproj...
Perla: src> cmd /C dotnet restore App.fsproj
Perla:   Determining projects to restore...
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:7331
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: https://localhost:7332
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: C:\Users\scyth\repos\sample
Perla:   Restored C:\Users\scyth\repos\sample\src\App.fsproj (in 1.05 sec).
Perla: Project and references (37 source files) parsed in 3985ms
Perla: Started F# compilation...
Perla: F# compilation finished in 10220ms
Perla: Started Fable compilation...
Perla: Fable compilation finished in 2536ms
Perla: Watching...
Perla: Listening at
        http://localhost:7331
        https://localhost:7332

Let me know how else I can help you :)

[AngelMunoz]

Woops... I think I found your issue

[AngelMunoz]

I'll leave that comment up just so you know it's a possibility I didn't realize I ran fable-sutil rather than fable-lit please ensure your perla.jsonc.importmap looks like this

{
  "imports": {
    "lit": "https://cdn.skypack.dev/pin/lit@v2.0.2-78IU6uYV3lBYFK6qpY9H/mode=imports/optimized/lit.js",
    "lit/": "https://cdn.skypack.dev/pin/lit@v2.0.2-78IU6uYV3lBYFK6qpY9H/mode=imports/optimized/lit/"
  },
  "scopes": {}
}

seems that the template is missing this line "lit/": "https://cdn.skypack.dev/pin/lit@v2.0.2-78IU6uYV3lBYFK6qpY9H/mode=imports/optimized/lit/" so it can do the rest of the imports by itself I'll fix the templates

[AngelMunoz]

Please let me know if the importmap fix works or if something else is going on

[kaeedo]

Hello. Thanks for looking into this. After applying that fix, the fable-lit sample does run, but I still see the error in my console Uncaught TypeError: Error resolving module specifier “lit”. Relative module specifiers must start with “./”, “../” or “/”.. To run this sample, I manually cloned the repository, and used perla as a local tool. I also tried perla as a global tool, but that made no difference. I also ran the perla init -k full command and tried to reclone everything, but also same result: It works in the browser but the console has that error

As for my own test, here is a small repo where I am having the issue that it doesn't run at all: https://github.com/kaeedo/PerlaReproduceIssue, and I have another branch in there that uses vite where it does work as expected: https://github.com/kaeedo/PerlaReproduceIssue/tree/UseVite

I personally use Firefox, but MS Edge shows the exact same behavior, as in the fable-lit sample runs but has the console error, and my own project doesn't run at all with that same error message but with module specifier 'etebase'.

Here's the output of my dotnet --info if it helps:

> dotnet --info
.NET SDK (reflecting any global.json):
 Version:   6.0.101
 Commit:    ef49f6213a

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.19043
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\6.0.101\

Host (useful for support):
  Version: 6.0.1
  Commit:  3a25a7f1cc

.NET SDKs installed:
  3.1.403 [C:\Program Files\dotnet\sdk]
  5.0.404 [C:\Program Files\dotnet\sdk]
  6.0.101 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
  Microsoft.AspNetCore.App 3.1.22 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 5.0.13 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 6.0.1 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 3.1.22 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 5.0.13 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 6.0.1 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.WindowsDesktop.App 3.1.22 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 5.0.13 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 6.0.1 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

[AngelMunoz]

Hey there, sorry I left this unattended for so long, are you still having this issue? I reviewed the sample and looks like it is using sutil now

let me know if the issue persists otherwise we can close this, thanks!

[kaeedo]

Feel free to close this. If anything else comes up I'll raise a new issue.

Thank you for your time