Hot reloading does not work for HTML templates #357

lmm-git · 2021-05-27T20:15:25Z

Version

@nuxtjs/tailwindcss: 4.1.1
nuxt: 2.15.6

Reproduction Link

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

Steps to reproduce

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

What is Expected?

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

The text was updated successfully, but these errors were encountered:

cpt-n3mo · 2021-05-30T18:00:18Z

Having the same issue..
on clean create-nuxt-app with tailwind.
but also stops the vuetify classes from hot reloading when tailwind is installed along side of it with a prefix.

using:
"nuxt": "^2.15.3",
"@nuxtjs/tailwindcss": "^4.0.1",

cpt-n3mo · 2021-06-11T16:02:39Z

Any progress on this bug..? Or maybe a workaround.. ?

cpt-n3mo · 2021-06-15T18:50:48Z

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.

cpt-n3mo · 2021-06-17T16:35:37Z

Good day again..

I have been playing around some more and have a little update, that when there is something commented out withing the style tags, as in if there is any form of type inside the style tags, hot reload stops working,... i have been looking into hot-update.js but i cant make heads or tails of it.. as it seems the updates are being pushed through. as the hot-update does show the modification,.. its just seems to not updating the DOM accordingly..

also removing tailwind from build modules does not solve the problem, only removing postcss with removal of node_modules and package-lock.json, will fix the problem.
so i suspect that postcss is interfering with webpack somehow. as even when tailwindcss in not active in nuxt.config.js hot reload still is not working..

UPDATE!.. WORKAROUND!
edit package.json whith the following versions,
"devDependencies": { "@nuxtjs/tailwindcss": "~3.4.3", "postcss": "~7.0.36" }
rm -rf node_modules package-lock.json
npm install

this fixed the problem for me.. cheers!!!

paplco · 2021-06-22T01:01:53Z

this fixed the problem for me.. cheers!!!

downgrading as specified fixed issue for me also

IgnisDa · 2021-06-26T04:14:34Z

I managed to take a screenshot. This message briefly appears in the console before the whole page is force reloaded.

fabis94 · 2021-07-05T13:34:30Z

I'm having the same issue

atlesque · 2021-07-07T11:48:21Z

this fixed the problem for me.. cheers!!!

downgrading as specified fixed issue for me also

The workaround works but it downgrades Tailwind to v1.9.x which disables other handy features of Tailwind 2.x like arbitrary values. So it would be great if we could find a better solution which works with the latest included Tailwind version 2.x.

An alternative workaround is to downgrade to v4.1:
"@nuxtjs/tailwindcss": "~4.1.0",
This will use Tailwind 2.x and hot-reloading will work. But on that version, there's another bug where it does the HMR twice, see #369

ewilan-riviere · 2021-07-09T07:45:02Z

I've a template with nuxt app and tailwind 2.0 with JIT without bug, I didn't find the difference with new nuxt app, but this works: https://gitlab.com/ewilan-riviere/nuxt-tailwind-template

productdevbook · 2021-07-11T09:36:44Z

some problem and 4.1.0 4.2.1 Compilation speed is 2x slow compared to 4.1.0
yarn dev old 20 s -> now 48-60 s

productdevbook · 2021-07-13T06:19:41Z

cc: @Atinux -> tailwindlabs/tailwindcss#4940 (comment)

HenrijsS · 2021-07-17T20:47:40Z

Downgrading to tailwindcss: 2.1.0 fixes the problem for me. (#369 (comment))

fabis94 · 2021-07-19T07:02:51Z

@HenrijsS Didn't seem to fix it for me.

Tailwind 2.1.0 (through "resolutions" in package.json) and JIT turned on. Nuxt 2.15.7.

cpt-n3mo · 2021-07-19T11:39:08Z

What version of nuxt are you using..? Also to the dev's.. what's up why this bug still existing... is there some update on progress fixing this bug, next to downgrading .... are you only planning to fix this in nuxt3 release ..? Regards

…

On Mon, 19 Jul 2021, 09:03 fabis94, ***@***.***> wrote: @HenrijsS <https://github.com/HenrijsS> Didn't seem to fix it for me. [image: image] <https://user-images.githubusercontent.com/938316/126116947-60922aea-fe8a-42ec-82f9-142f57c7dbc4.png> Tailwind 2.1.0 and JIT turned on. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#357 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE3774YE4KQTOUCBAYPHPCLTYPE2LANCNFSM45VAOUSQ> .

fabis94 · 2021-07-20T08:02:29Z

@cpt-n3mo I'm on nuxt 2.15.7 and latest version of @nuxt/tailwind, if you were asking me

cpt-n3mo · 2021-07-21T12:23:35Z

Sorry indeed I was talking to you 😅 Did you remove package lock and node module folder..? Then a fresh npm install..? Regards..

…

On Tue, 20 Jul 2021, 10:02 fabis94, ***@***.***> wrote: @cpt-n3mo <https://github.com/cpt-n3mo> I'm on nuxt 2.15.7, if you were asking me — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#357 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE3774YJLNHWP5KDI7F2TT3TYUUSBANCNFSM45VAOUSQ> .

fabis94 · 2021-07-22T06:56:06Z

@cpt-n3mo Yes, I did do that, didn't seem to make a difference.

tailwindcss@2.1.0
@nuxtjs/tailwindcss@4.2.1
nuxt@2.15.7

HenrijsS · 2021-07-22T07:08:31Z

@fabis94
Can you paste your CSS file here? The tailwind one in assets.

fabis94 · 2021-07-22T07:13:20Z

@HenrijsS It's the default tailwind css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind config:

/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */

module.exports = {
  mode: 'jit',
  presets: [require('@fabis/custom-tailwind-theme').TailwindPreset],
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'src/**/*.{vue,js,ts}',
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'node_modules/**/*.vue',
    ],
  },
};

Here's the plugin inside the custom tailwind theme:

const plugin = require('tailwindcss/plugin');

/**
 * This theme adds all of the custom styling that can't be done through the preset alone
 */
module.exports = plugin(function ({
  addBase,
  addComponents,
  addUtilities,
  theme,
}) {
  const screens = theme('screens', {});

  // BASE LAYER
  addBase({
    // Responsive font classes depending on locale
    '.font-sans': {
      'font-family': "'SomeFont', sans-serif",
    },
    "html[lang='ja'] .font-sans": {
      'font-family': "'SomeFontJP', sans-serif",
    },
  });

  // Base font applied on body
  addBase({
    body: {
      '@apply font-sans': {},
    },
  });

  // COMPONENTS LAYER
  const headingCount = 5;
  const headingDefinitions = {};
  for (let i = 1; i <= headingCount; i++) {
    headingDefinitions[`.heading-${i}`] = {
      [`@apply text-h${i} font-bold`]: {},
    };
  }

  addComponents(
    {
      // Heading classes
      ...headingDefinitions,
      // Links
      '.link-undecorated': {
        '@apply text-blue-700 cursor-pointer': {},
      },
      '.link': {
        '@apply link-undecorated hover:underline': {},
      },
    },
    { variants: ['responsive'] }
  );

  // UTILITIES LAYER
  // Making font-size/line-height dynamic for some text utility classes
  const smSize = screens['sm'];
  addUtilities({
    [`@media (min-width: ${smSize})`]: {
      '.text-h1': {
        'font-size': '48px',
        'line-height': '60px',
      },
      '.text-h2': {
        'font-size': '36px',
        'line-height': '46px',
      },
    },
  });
});

HenrijsS · 2021-07-22T07:20:55Z

@fabis94 Did you try the good old disable-enable debugging?
Remove the plugin and the theme. Check if it compiles. If yes - turn on one-by-one and see which part causes the bug.
If it still throws the error with vanilla Tailwind and default config, then I have no clue.

fabis94 · 2021-07-22T07:32:26Z

@HenrijsS Thanks for the effort, but that didn't help either. I removed the plugin, even turned off JIT, but the issue persists

HenrijsS · 2021-07-22T07:33:58Z

@fabis94 Expand the error and look for the stack trace and look which line is the Unaccepted module.

fabis94 · 2021-07-22T07:35:13Z

@HenrijsS It's the same issue as before, it says that tailwind.css can't be reloaded:

cpt-n3mo · 2021-07-22T11:24:02Z

@cpt-n3mo Yes, I did do that, didn't seem to make a difference.

tailwindcss@2.1.0
@nuxtjs/tailwindcss@4.2.1
nuxt@2.15.7

i see, remove the taiwindcss@2.1.0 and @nuxtjs/tailwindcss@4.2.1 and to dev deps "@nuxtjs/tailwindcss": "~3.4.3", "postcss": "~~7.0.36" be sure to use these versions with a tilda (~~) .
then it should work you need these versions, specificly, add the postcss as well, newer versions dont work for the older nuxtjs/tailwindcss 4.2.1 package.

remove package lock and node modules folder and do a npm install or yarn what ever you use..

it should work this way. regards.

fabis94 · 2021-07-22T11:25:33Z

@cpt-n3mo Does this mean also downgrading PostCSS to 7.x? Cause I need Nuxt to use PostCSS 8 and Tailwind 2+

cpt-n3mo · 2021-07-22T11:37:43Z

indeed that is the case .. its deff not ideal but it the only combination i found that works..
regards.

atlesque · 2021-07-22T14:25:57Z

Here's an easy way to reproduce the issue:

Run npx create-nuxt-app and generate a new Nuxt project
Run npx tailwindcss init to create a Tailwind config file
Edit tailwind.config.js and add mode: 'JIT', to enable the JIT compiler
Start the dev server using npm run dev
Open Chrome and open the Dev Tools
Enable Preserve log in the Dev Tools' console
Edit /components/Tutorial.vue and add an arbitrary value to an element, e.g. bg-[#ee3456]
The error (as previously posted) is shown: [HMR] The following modules couldn't be hot updated: (Full reload needed)

Expected: To see the changes without page reload, using HMR.

The issue appears to be related to how Tailwind JIT "caches" the previously used classes. Continuing from the previous steps:

Change arbitrary value from bg-[#ee3456] to something else, e.g. bg-[#ee3457]
HMR breaks and full reload happens
Now change the value back to a value which you have used before, e.g. bg-[#ee3456]
HMR works fine

The moment you add a class, whether built-in or arbitrary, which Tailwind (or the CSS loader?) has never seen before, it will cause HMR to break. Once the class has been cached somehow, HMR will work okay.

NotHolst · 2021-08-13T06:18:52Z

Any news on this. is it being worked on ?

WebDevPJ · 2021-08-20T20:43:07Z

Keeping this alive, any updates on this?

HenrijsS · 2021-08-20T21:00:55Z

I think all module development is on hold in preparation for Nuxt 3, so don't expect any updates.
Issues are only piling on without any updates.

hsariaslan · 2021-08-21T14:09:37Z

UPDATE!.. WORKAROUND!
edit package.json whith the following versions,
"devDependencies": { "@nuxtjs/tailwindcss": "~3.4.3", "postcss": "~7.0.36" }
rm -rf node_modules package-lock.json
npm install

this fixed the problem for me.. cheers!!!

it's working, thanks!

productdevbook · 2021-08-27T03:29:02Z

✅ ----- Temporary Solution ------ ✅

Hello everyone, apply this solution for now. ->
Check detail ...
tailwindlabs/tailwindcss#4962 (comment)

Check example setup
https://github.com/bradlc/jit-nuxt

areindl · 2021-08-31T06:28:25Z

Is there any solution that does not involve downgrading to PostCSS v7?

productdevbook · 2021-08-31T06:53:41Z

Is there any solution that does not involve downgrading to PostCSS v7?

In the above message, it contains all the instructions and even has an example installation.

areindl · 2021-09-02T07:46:15Z

In the above message, it contains all the instructions and even has an example installation.

Thank you @productfrontenddeveloper but this is - again - a PostCSS 7 solution.

Look at the package.json in the the example:

"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4"

I cannot downgrade our application.

productdevbook · 2021-09-02T08:12:36Z

In the above message, it contains all the instructions and even has an example installation.

Thank you @productfrontenddeveloper but this is - again - a PostCSS 7 solution.

Look at the package.json in the the example:

"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4"

I cannot downgrade our application.

There is no other solution at the moment, if you are not using anything related to postcss 8 nuxt/postcss8#18 you have to do this.
As a result, you can use all the features and latest version of tailwindcss. and fixed hot reloading

medairbit · 2021-10-12T13:54:22Z

A workaround that I've found to keep working with this module (and with any nuxt module that depends on @nuxt/postcss8), is to add this to your project package resolutions:

  "resolutions": {
    "autoprefixer": "^9",
    "css-loader": "^4.3.0",
    "postcss": "^7.0.32",
    "postcss-import": "^12.0.1",
    "postcss-import-resolver": "^2.0.0",
    "postcss-loader": "^3.0.0",
    "postcss-nesting": "^7.0.1",
    "postcss-url": "^8.0.0",
    "postcss-custom-properties": "^10.0.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
  }

ghost · 2021-10-19T18:45:21Z

TL:DR, nuxt doesnt work when youre using tailwind.
solution: back to vue X_X

lihbr · 2021-12-08T12:43:32Z

I managed to pinpoint the issue, for more details see: nuxt/postcss8#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: nuxt/nuxt#9014):

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

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

Cheers!

the94air · 2021-12-22T07:16:23Z

commenting the ./nuxt.config.{js,ts}', line seemed to fix it 😃
#406 (comment)

oezkancodes · 2021-12-29T11:48:07Z

I solved it by removing the @nuxtjs/style-resources module. I didn't know I still had it while not using it. HMR works now.

creazy231 · 2022-01-11T07:56:17Z

Still facing the same problem using mentioned workarounds the be able to use TailwindCSS v3

lihbr · 2022-01-11T11:07:53Z

Still facing the same problem using mentioned workarounds the be able to use TailwindCSS v3

TailwindCSS 3 might be a whole new issue of its own yeah ^^'

stale · 2022-03-30T05:49:10Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

vedmant · 2022-04-16T05:00:20Z

Any updated on this with latest v5 version and Tailwind 3? I still have this issue, HMR is not working if previously not used Tailwind class is added to template, it reloads whole page:

[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves.
[HMR]  - ./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./assets/css/tailwind.css

ramonsenadev · 2022-06-20T14:07:26Z

@vedmant, For now, I disabled the purging from Tailwind 3 in dev mode.
How to disable: tailwindlabs/tailwindcss#6557 (reply in thread)

- 컴파일시 eslint component이름의 복합명사 사용에러 끄기 - npm run dev 실행시 hot reload가 안되는 경우가 있음 정확한 원인은 모르겠으나 css와 관련이 있는것으로 추정 참조 : nuxt-modules/tailwindcss#357

mod7ex · 2022-09-12T17:41:35Z

i don't think it's practical for most people, the bundles are too heavy
any Please what is the right combination ? (versions) to make this work

ahmetonurslmz · 2023-01-15T20:02:08Z

Hello,

I encounter the issue and fixed this way. You can look and try to fix for your problem.

https://en.ahmetonursolmaz.com.tr/nuxt-hot-reload-isnt-working/

lmm-git added the bug Something isn't working label May 27, 2021

This was referenced Jun 3, 2021

issues with nuxt + tailwind nuxt/nuxt#9380

Closed

Strange behaviour with hot reload (does not work as expected) nuxt/nuxt#9405

Closed

fabis94 mentioned this issue Jul 5, 2021

[HMR] The following modules couldn't be hot updated: (Full reload needed) - ./assets/css/tailwind.css #368

Closed

atlesque mentioned this issue Jul 7, 2021

HMR reload twice with JIT #369

Closed

productdevbook mentioned this issue Jul 13, 2021

TailwindCSS does not update styles on Hot Reload (React + JIT mode) tailwindlabs/tailwindcss#4940

Closed

productdevbook mentioned this issue Jul 13, 2021

Vue-Nuxt Hot reloading JIT mode does not work via Nuxt Module comments tailwindlabs/tailwindcss#4962

Closed

lihbr mentioned this issue Dec 8, 2021

build.css.modules.compileType: "icss" breaks HMR since nuxt@2.15.4 nuxt/postcss8#24

Open

medairbit mentioned this issue Jan 6, 2022

Upgrade to Tailwind CSS v3.0 #406

Closed

stale bot added the wontfix This will not be worked on label Mar 30, 2022

stale bot closed this as completed Apr 16, 2022

Hot reloading does not work for HTML templates #357

Hot reloading does not work for HTML templates #357

Comments

lmm-git commented May 27, 2021 • edited

Version

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

Notes

cpt-n3mo commented May 30, 2021 • edited

cpt-n3mo commented Jun 11, 2021

cpt-n3mo commented Jun 15, 2021

cpt-n3mo commented Jun 17, 2021 • edited

paplco commented Jun 22, 2021

IgnisDa commented Jun 26, 2021

fabis94 commented Jul 5, 2021

atlesque commented Jul 7, 2021 • edited

ewilan-riviere commented Jul 9, 2021

productdevbook commented Jul 11, 2021 • edited

productdevbook commented Jul 13, 2021 • edited

HenrijsS commented Jul 17, 2021 • edited

fabis94 commented Jul 19, 2021 • edited

cpt-n3mo commented Jul 19, 2021 via email

fabis94 commented Jul 20, 2021 • edited

cpt-n3mo commented Jul 21, 2021 via email

fabis94 commented Jul 22, 2021

HenrijsS commented Jul 22, 2021

fabis94 commented Jul 22, 2021

HenrijsS commented Jul 22, 2021

fabis94 commented Jul 22, 2021

HenrijsS commented Jul 22, 2021

fabis94 commented Jul 22, 2021

cpt-n3mo commented Jul 22, 2021 • edited

fabis94 commented Jul 22, 2021

cpt-n3mo commented Jul 22, 2021

atlesque commented Jul 22, 2021 • edited

NotHolst commented Aug 13, 2021

WebDevPJ commented Aug 20, 2021

HenrijsS commented Aug 20, 2021

hsariaslan commented Aug 21, 2021

productdevbook commented Aug 27, 2021 • edited

areindl commented Aug 31, 2021

productdevbook commented Aug 31, 2021 • edited

areindl commented Sep 2, 2021

productdevbook commented Sep 2, 2021 • edited

medairbit commented Oct 12, 2021 • edited

ghost commented Oct 19, 2021

lihbr commented Dec 8, 2021 • edited

the94air commented Dec 22, 2021

oezkancodes commented Dec 29, 2021

creazy231 commented Jan 11, 2022

lihbr commented Jan 11, 2022

stale bot commented Mar 30, 2022

vedmant commented Apr 16, 2022 • edited

ramonsenadev commented Jun 20, 2022 • edited

mod7ex commented Sep 12, 2022

ahmetonurslmz commented Jan 15, 2023

lmm-git commented May 27, 2021 •

edited

cpt-n3mo commented May 30, 2021 •

edited

cpt-n3mo commented Jun 17, 2021 •

edited

atlesque commented Jul 7, 2021 •

edited

productdevbook commented Jul 11, 2021 •

edited

productdevbook commented Jul 13, 2021 •

edited

HenrijsS commented Jul 17, 2021 •

edited

fabis94 commented Jul 19, 2021 •

edited

fabis94 commented Jul 20, 2021 •

edited

cpt-n3mo commented Jul 22, 2021 •

edited

atlesque commented Jul 22, 2021 •

edited

productdevbook commented Aug 27, 2021 •

edited

productdevbook commented Aug 31, 2021 •

edited

productdevbook commented Sep 2, 2021 •

edited

medairbit commented Oct 12, 2021 •

edited

lihbr commented Dec 8, 2021 •

edited

vedmant commented Apr 16, 2022 •

edited

ramonsenadev commented Jun 20, 2022 •

edited