Tried to unstuck my CI, broke HMR

Hi everyone!

A few months ago I scaffolded a project with elm-batteries. This project stayed stuck in my CI because of a dependency issue induced by a change in the author’s name.

I followed one of the fixes found in this post, updated elm-css and removed Skinney/murmur3 from my indirect dependencies.
CI is unstuck but during the process I, somehow, broke the HMR of Parcel. When I start the local netlify development server I get the following error :

/Users/myProject/src/Main.elm: Compiled JS from the Elm compiler is not valid. You must use the Elm 0.19 compiler.

I tracked down this error to elm-hot but I’m not sure how to proceed from there. My project uses elm 19.1 and it is the only version of the compiler installed on my machine. Does any of you have some thoughts about a strategy to debug this ? Or even better have you found yourself in this situation and found a fix ?

Thanks for your help!

I’d start here:

What is the value of modifiedCode? Does the regex match?

You can edit that file right in your node_modules folder and add console.logs and require("fs").writeFileSync()s where needed to debug. You might need to clear Parcel’s cache when making changes.

Thanks a lot for this insight!
console.log({"modifiedCode": modifedCode}) gives me : { modifiedCode: '' }

I also ran console.trace() inside inject to see where are the other invocations. Here’s the output :

Trace
at inject (/Users/yoelis/bcl/spacing-and-learning/node_modules/elm-hot/src/inject.js:7:13)
at ElmAsset.generate (/Users/yoelis/bcl/spacing-and-learning/node_modules/parcel-bundler/src/assets/ElmAsset.js:78:23)
at async ElmAsset.process (/Users/yoelis/bcl/spacing-and-learning/node_modules/parcel-bundler/src/Asset.js:217:24)
at async Pipeline.processAsset (/Users/yoelis/bcl/spacing-and-learning/node_modules/parcel-bundler/src/Pipeline.js:46:7)
at async Pipeline.process (/Users/yoelis/bcl/spacing-and-learning/node_modules/parcel-bundler/src/Pipeline.js:24:23)
at async Object.run (/Users/yoelis/bcl/spacing-and-learning/node_modules/parcel-bundler/src/worker.js:15:12)
at async Bundler.loadAsset (/Users/yoelis/bcl/spacing-and-learning/node_modules/parcel-bundler/src/Bundler.js:577:19)
at async /Users/yoelis/bcl/spacing-and-learning/node_modules/parcel-bundler/src/Bundler.js:610:13
at async Promise.all (index 1)
at async Bundler.loadAsset (/Users/yoelis/bcl/spacing-and-learning/node_modules/parcel-bundler/src/Bundler.js:599:21)

Cool! Let’s keep going. Since modifiedCode is the empty string, originalElmCodeJS must be (maybe double-check that, though) the empty string too, which is the parameter of inject. Your stack trace show that the place calling inject is this:

compileToString comes from node-elm-compiler:

Maybe that function is returning the empty string for some reason?

Your guidance through this maze is invaluable!

originalElmCodeJS is indeed an empty string.

It’s like compileToString isn’t fed by anything neither. But it doesn’t have a way to catch this kind of error so it returns an empty string without question.

For me it means that the compiler can’t spit out anything for some reason. The most probable one I can think of is that it’s not installed properly in this project. My machine is a Mac m1. I should have mentioned that earlier but it used to work properly before I changed the project dependancies.
I ran this project on another computer and I did not encountered the Compiled JS from the Elm compiler is not valid. You must use the Elm 0.19 compiler. error.
So it points further more in this direction.

It’s weird however that I don’t get other errors…

I’m out of ideas for the moment, but at least we’ve come to the conclusion that “HMR not working” seems to be the symptom, while “compiling an empty string” seems to be the problem.

1 Like

By any chances, are you aware of a way to run elm make with the compiler installed within the project and not the globally installed elm compiler ?

If you run Parcel like one of these the local Elm should be picked up automatically:

npx parcel
npm run my-script-that-calls-parcel
yarn parcel

The reason is that npx, npm and yarn all add your local ./node_modules/.bin/ folder to PATH when executing commands.

1 Like