I ran into a compilation bug when following the “Task Tutorial” in Elm’s Reactivity documentation.
This is the output I got when compiling (where Main.elm is the exact copy/paste from the “HTTP Tasks” section of the docs):
> elm-make Main.elm --output=index.html Success! Compiled 1 modules. elm-make: index.html: commitAndReleaseBuffer: invalid argument (invalid character)
From browsing around, it looks like the issue might be that the Elm compiler needs to set a LANG property in the Haskell code that runs the compiler to better specify encodings. Whether it’s relevant or not to the default encoding that failed here, I’m based in the US.
While the bug is still open, read on for a work-around, if you encounter the same issue.
> elm-make Main.elm Success! Compiled 1 modules. Successfully generated elm.js
So, I compared the output of that JS to the HTML output that had been generated before the failure. I noticed that a record field named smartypants was being used just before the failure. While this field was unrelated, I was able to compare the two outputs to determine the location of the failure (smartypants is only used a handful of times, so it was an easy landmark to navigate by).
I managed to find this output in the JS:
Whereas, in the HTML, it simply halted at:
The bug just seems to be part of the configuration for the HTML generation in the Elm compiler, as the JS works just fine.
I had been able to work through the tutorial up to this point, so I simply backed up a step to the previous output, to re-generate a valid HTML page with embedded Elm. I then scraped out the embedded JS and just imported the separate JS file I had generated:
This did the trick.
It would be helpful if there was a more obvious way of generating a stock HTML template to use with Elm-generated JS files. I seem to recall seeing the two outputs discussed somewhere in the Elm docs and it’s easy enough to “roll your own”, but it would be nice to just have a stock HTML that could be dropped in or generated from elm-make that doesn’t include the embedded JS.