Interactive components not working since Astro updated to 2.0

[DrBloke]

Hi, thanks for making this library. I think it will be very useful.

I'm finding that the more complex interactive uses of elm (where state is updated) are not working. I think this might be due to the updating of Astro to 2.0. The simple Hello World example works fine. With the interactive ones, the Elm code seems to compile fine, but then an error is thrown claiming not to be able to find the component. I have produced as minimal example here:

Minimal example

I have simplified it to just use Browser.sandbox to make things simpler. The error was the same if using Browser.application

If there is more info I could provide or any other way I might be able to help then please let me know.

[zkrzyzanowski]

for anyone running into this issue, I think i found the root cause, but I'm not sure the correct fix.

The dev middleware used to handle requests to elm files is interpreting elm files at the root of your file system, instead of relative to your current working directory.

adding verbose : true to the elm compiler options here will show that it's trying to run the following from @DrBloke's reproduction repo

elm make /src/components/elm/Counter.elm --output /var/folders/q5/_wzcqbts6ss2_t9j3dxfwj5h0000gn/T/2023622-66626-ks1uhc.4wvd.js

Note the / in the beginning of the elm component path (not ./)

the following code fixes their example at least by adding a . prefix to the filepath in the middleware here

  if (req.originalUrl?.endsWith(".elm")) {
        let filename = req.originalUrl.replace("/@fs", "");
        if (!filename.startsWith(".")) {
            filename = "." + filename
        };

clearly something changed with astro or vite in the way that paths are handled when astro was upgraded to v2. This is at least a workaround or starting point if anyone else wants to continue to investigate

possibly related to this vite issue

[dkowis]

Astro is on v4 now, so it's probably even more broke?