Nuxt.js: hot reloading issue - while compiling additional code changes are dropped

[simllll]

Version

v2.6.3

Reproduction link

https://every-project

Steps to reproduce

1. create new nuxt project
2. start server
3. change code, save
4. while it's reloading / compiling, make another code change
5. 2nd code change is not applied

to get things working afterwards, you need to insert a new line or change something else so a new hot reloading/compiling process is triggered.

What is expected ?

queue up additional changes, and run another compiling/hot reloading process afterwards automatically.

What is actually happening?

changes while compiling is running are "lost" until the next "hor reloading" process is somehow triggered

_{This bug report is available on Nuxt community (#c9151)}

[Atinux]

Is this only happening to Nuxt or does it can be reproduced with a Vue app as well (created with vue-cli)?

[suits-at]

We have created a repo to reproduce this behaviour: hotreload-test. In this repo you can find 2 apps, one was created with the vue-cli and one with nuxt-creat-app.
To these apps we added a 10 second timeout, for easier debugging. If you now start the nuxt app using npm run dev, you can reproduce the behaviour with the following steps:

1. Go to any file e.g. index.vue and change something, for example change the text of the h1 to something. Then save your changes - this will start compiling - you should see calm down... for 10 seconds in the console.
2. During this 10 seconds, change another line - e.g. change the text of the h2 to anything and press save again, to start compiling.
3. After compiling has finished, the text of the h1 is changing but the text of the h2 has not changed to anything.

We also tested the same with the app created by vue-cli, in this case the behaviour is as expected: after compiling has finished, all changes are applied.

[suits-at]

Also with the just released nuxt version 2.7.0 the behaviour stays the same.

[pi0]

@suits-at Thanks for nice repro. I've tracked down this to time-fix plugin which necessary to avoid build-loop in some platforms. (vue-cli does not protected it)

As a workaround you can disable it using:

{
    extend(config, ctx) {
        config.plugins = config.plugins.filter(p => p.constructor.name !== 'TimeFixPlugin')
    }
}

[pi0]

/cc @Atinux @egoist

[simllll]

nice thanks @pi0, the workaround works perfectly (y)

[Atinux]

I remember this plugin indeed, without it, Webpack was keep re-building and was really annoying for DX.

Let's see what @egoist can say about it today :)

[egoist]

Hopefully [email protected] fixed this (https://github.com/egoist/time-fix-plugin/commit/5acb85dd5375480459454299f6d34f9c1d908f48). Try reinstalling Nuxt.

[pi0]

@egoist I can confirm this works perfectly :100:

[manniL]

@egoist Thanks for the quick fix :speak_no_evil:

[besrabasant]

I am still facing an issue.

"dependencies": {
    "@nuxtjs/sitemap": "^2.0.1",
    "nuxt": "^2.12.0",
    "nuxt-i18n": "^6.6.1",
    "tailwindcss": "^1.2.0",
    "time-fix-plugin": "^2.0.6",
    "vue-meta": "^2.3.3"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^1.4.0",
    "babel-eslint": "^10.1.0",
    "cross-env": "^7.0.2",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.10.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.13.1",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2"
  }

nuxt.config.js

export default {
  mode: "universal",

  dev: process.env.NODE_ENV !== "production",

  server: {
    host: "localhost"
  },

  buildModules: ["@nuxtjs/tailwindcss"],

  modules: [
    [
      "nuxt-i18n",
      {
        locales: ["en"],
        defaultLocale: "en",
        vueI18n: {
          fallbackLocale: "en",
          messages: translationMessages
        }
      }
    ],
    "@nuxtjs/sitemap"
  ],

  render: {
    injectScripts: process.env.NODE_ENV === "development"
  },

  tailwindcss: {
    configPath: "~/tailwind.config.js",
    cssPath: "~/assets/sass/main.scss",
    purgeCSSInDev: false,
    exposeConfig: false
  },

  build: {
    devtools: process.env.NODE_ENV !== "production",
    extractCSS: process.env.NODE_ENV === "production",
    postcss: { plugins: [require("tailwindcss"), require("autoprefixer")] },
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: "styles",
            test: /\.(css|vue)$/,
            chunks: "all",
            enforce: true
          }
        }
      }
    },
    /*
     ** You can extend webpack config here
     */
    // eslint-disable-next-line no-unused-vars
    extend(config, ctx) {
      config.plugins = config.plugins.filter(
        p => p.constructor.name !== "TimeFixPlugin"
      )
    }
  }
}