Getting a javascript console error when starting a minimalist project

[davidglassborow]

Hi @mark-gerarts, thanks for your work on this. I've decided to go through the nature of code in fable, and searching around for p5 bindings, found this library.

I've meticulously followed the fable install instructions, and then tried to implement the simplest possible example from https://github.com/mark-gerarts/perfect-fifth?tab=readme-ov-file#display.

However which ever way I try and use perfect-fifth, I always get the following error in the console:

Have you got any idea what I could be doing wrong ?

I get a similar error (but different object name) trying to use p5js directly

I've created a repo for the absolute minimum steps to get fable + perfect-fifth install, which replicates the issue, with each commit being the steps along the way.

Any help massively appreciated ! I'm not super confident with fable so maybe I'm missing something obvious.
Thanks,
Dave

[davidglassborow]

whoops forget the repo: https://github.com/davidglassborow/perfect-fifth-repo

[mark-gerarts]

Hi @davidglassborow, thank you for reporting this. By following your steps I can reproduce the error, which is good news. I believe it has something to do with Vite; when I use webpack to compile your example, everything works (using config similar to this). This is why the bug only surfaces now I think.

In any case, the real underlying problem is the following code that is generated from the perfect fifth library:

// In P5.fs
[<ImportAll("p5")>]

// Compiles to
import * as p5_2 from "p5";

Which should be as follows in order to work with Vite.

import p5 from "p5";

So I'll have to figure out how to do this, because I'm not that well versed in how Fable handles JS imports. The P5 import is very central to the PerfectFifth library, so hopefully the impact is minimal...

An alternative solution is to figure out how to make Vite behave like webpack for handling these kinds of imports. However, I am not that familiar with JS build tools either (i.e. Vite vs webpack differences), but maybe that can be a direction for you to look into.

I'm quite busy the coming weeks (exams coming up), so I don't expect to release a fix anytime soon. As a temporary solution, I suggest that you move over to webpack for the time being. The config I linked can be a good starting point if you remove the library/libraryTarget properties, these are not relevant.

[davidglassborow]

I had a feeling it might be import & Vite related, not that I really understand JS imports, but this stack overflow report seemed similar.

I'll swap to Webpack, and will post back if I manage to figure out any changes needed.

Hope the exams go well !

[anpin]

Hey everyone, I haven’t had time to play with this in a while, but last year I was able to run it with vite https://github.com/anpin/f5-vite-template

good luck with your exams @mark-gerarts !

[mark-gerarts]

Thanks both! @anpin your repository is a great help, apparently things work fine with vite 4.x. Something changed in version 5 causing the issue, so that gives me a good direction to start investigating.

@davidglassborow the easiest thing right now is to run npm i -D [email protected], that'll save you the hassle of changing to webpack.

[davidglassborow]

Perfect, that fixed the problem, thanks both