question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Hot reloading does not work for HTML templates

See original GitHub issue

Version

@nuxtjs/tailwindcss: 4.1.1 nuxt: 2.15.6

Reproduction Link

https://rechenknecht.net/lmm/nuxt-tailwind-bug-report

Steps to reproduce

  1. Clone repo
  2. Run yarn dev
  3. Change any text in pages/index.vue (e.g. schaukasten -> schaukasten2)

What is Expected?

  1. Hot reloading should work

What is actually happening?

  • Text is not updated until page in browser is manually refreshed
  • A loading indicator is shown in the bottom right corner (file change is detected)

Notes

  • Hot reloading works for removing components in the template (e.g. removing or adding the Logo component)
  • Hot reloading works for scripts
  • Hot reloading works for styles
  • Works with other UI frameworks like vuetify

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:23
  • Comments:54

github_iconTop GitHub Comments

29reactions
lihbrcommented, Dec 8, 2021

I managed to pinpoint the issue, for more details see: https://github.com/nuxt/postcss8/issues/24

Temporary Fix

You’re likely experiencing this issue if you’re:

  • On Nuxt 2.15.4 or later;
  • Using PostCSS 8 (if you’re using @nuxtjs/tailwindcss 4, your are).

Disabling icss compile type in your build options should fix the issue (but might introduce others if you’re relying on SASS, see: https://github.com/nuxt/nuxt.js/pull/9014):

// nuxt.config.js
export default {
	/* ... */

	build: {
		loaders: {
			css: {
				modules: false,
			},
		},
	}
}

Cheers!

25reactions
cpt-n3mocommented, Jun 15, 2021

Good day…

I have been playing around with it for a bit, and i noticed that it keeps working fine when there is no other css defined within <style></style>, once you add anything to it id,class,etc it stops the hot reload from working, removing it again needs a manual refresh to allow the hot reload to start working again, inline styles seem to work fine as well,

this also only seems to happen when the styles are defined within that component or page, as when defining a scoped style in layout/default.vue this does not effect the hot reload of let say the pages/index.vue

so a kind of bad workaround would be, to not define any styles within the style tags, and put everything inline…

i hope this gets fixed soon, as this kind of sucks… i would help my self but i would not know were to start…

kind regards.

Read more comments on GitHub >

github_iconTop Results From Across the Web

WebPack Hot Reload not working for HTML files
I want to have it so when i save my file the browser updates its content without fully reloading the page. <pre> const...
Read more >
hot reloading code and html templates for web app development
Hi all, I often use serve/servlet to launch my webapp. Often from the repl while I'm developing. One major annoyance I have, however,...
Read more >
Hot Reload does not update Shell templates
A fix for this issue has been internally implemented and is being prepared for release. We'll update you once it becomes available for...
Read more >
Difference between Hot Reloading and Live ... - GeeksforGeeks
Hot reloading and Live reloading are something that Reacts Native developers use on regular basis. Both have their own advantages and ...
Read more >
Write and debug code by using Hot Reload - Visual Studio ...
Update running code with Hot Reload · Open a project based on a supported application type. · Make sure that Enable native code...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found