Tried to unstuck my CI, broke HMR

Yoelis · May 4, 2021, 5:02pm

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!

lydell · May 4, 2021, 5:10pm

I’d start here:

github.com

klazuka/elm-hot/blob/f31865e80716087f6e2154872138cd81faf05a65/src/inject.js#L33-L37


const regex = /(_Platform_export\([^]*)(}\(this\)\);)/;
const match = regex.exec(modifiedCode);


if (match === null) {
    throw new Error("Compiled JS from the Elm compiler is not valid. You must use the Elm 0.19 compiler.");

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.

Yoelis · May 4, 2021, 7:12pm

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)

lydell · May 4, 2021, 8:46pm

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:

github.com

parcel-bundler/parcel/blob/e11f0852e30fdac9ecae22398d1cf232b5eab9a2/packages/core/parcel-bundler/src/assets/ElmAsset.js#L74-L79


let compiled = await this.elm.compileToString(this.name, this.elmOpts);
this.contents = compiled.toString();
if (this.options.hmr) {
  let {inject} = await localRequire('elm-hot', this.name);
  this.contents = inject(this.contents);
}

compileToString comes from node-elm-compiler:

github.com

rtfeldman/node-elm-compiler/blob/5801685cf669c2217d8720fddf78dfabe7cf111a/src/index.ts#L123-L167


function compileToString(sources, options) {
  const suffix = getSuffix(options.output, '.js');


  return new Promise(function (resolve, reject) {
    temp.open({ suffix }, function (err, info) {
      if (err) {
        return reject(err);
      }


      options.output = info.path;
      options.processOpts = { stdio: 'pipe' }


      var compiler;


      try {
        compiler = compile(sources, options);
      } catch (compileError) {
        return reject(compileError);
      }

This file has been truncated. show original

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

Yoelis · May 5, 2021, 8:33am

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…

lydell · May 5, 2021, 10:38am

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.

Yoelis · May 6, 2021, 9:32am

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 ?

lydell · May 6, 2021, 10:21am

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.

system · May 16, 2021, 10:21am

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Using Elm and Parcel for zero configuration web asset management Show and Tell	6	2153	December 7, 2018
What happened to elm-hot-loader? Learn	5	2073	May 3, 2018
[FIXED] Fixing Elm-Make 0.19 in VS Code 1.27.2 Learn	4	2099	October 6, 2018
Parcel Bundler and elm-hot-loader Learn	3	1838	January 9, 2018
Elm 0.18 on ARM/Apple M1 not working Request Feedback	2	1079	May 2, 2021

Tried to unstuck my CI, broke HMR

Related Topics