Hot module replacement compatibility

[filipac]

Hi there,

I've switched to JIT module for a project to test it out and the project is using webpack encore. Does this support HMR? It works in npm run watch mode, but in HMR it only gets the initial styles but any change is not picked up, I have to restart the server to see changes.

[nckrtl]

With Laravel Mix it just works fine with HMR.

[nithiz]

I have exactly the same issue (also with webpack encore). Even when using the WatchExternalFilesPlugin like this: .addPlugin(new WatchExternalFilesPlugin({ files: [ './templates/**/*.html.twig' ] })).

It does trigger a build on changes to the templates but somehow the tailwind compiler is not picking up the changes.

[nithiz]

Ah, figured it out! You have to make sure you're in DEV environment. You can do it like so NODE_ENV=development encore dev --watch.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

If you setup HMR, then it should work as expected.
It seems that @nithiz also uses encore and has it working now!

[filipac]

@nithiz thanks for the tip, that does it! added cross-env NODE_ENV=development into the hot command in package.json and it works now.

[filipac]

@RobinMalfait maybe it should be specified in the docs or readme that it only works if NODE_ENV is development?

[nithiz]

@filipac Already is: `

Make sure you set NODE_ENV=development if you are running a watcher, or Tailwind won't watch your template files for changes. Set NODE_ENV=production for one-off builds.

If you want to control whether Tailwind watches files or not more explicitly, set TAILWIND_MODE=watch or TAILWIND_MODE=build to override the default NODE_ENV-based behavior.

`

That's how i found out :) But it's easy to assume you're in dev mode automatically when you run yarn encore dev --watch.

[filipac]

oh, then forgive my stupid thoughts :)) did not notice it