Hot reloading always doing a full page reload

[BaptisteLemarcis]

Version

3.9.3

Environment info

Environment Info:

  System:
    OS: Windows 10
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 10.16.0 - C:\Program Files\nodejs\node.EXE      
    Yarn: Not Found
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.1.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  3.9.2
    @vue/babel-preset-jsx:  1.0.0
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.0.0
    @vue/babel-sugar-v-on:  1.0.0
    @vue/cli-overlay:  3.9.0
    @vue/cli-plugin-babel: ^3.9.2 => 3.9.2
    @vue/cli-plugin-eslint: ^3.9.2 => 3.9.2
    @vue/cli-plugin-unit-jest: ^3.8.0 => 3.9.0
    @vue/cli-service: ^3.8.4 => 3.9.3
    @vue/cli-shared-utils:  3.9.0
    @vue/component-compiler-utils:  2.6.0 (3.0.0)
    @vue/eslint-config-standard: ^4.0.0 => 4.0.0
    @vue/preload-webpack-plugin:  1.1.0
    @vue/test-utils: 1.0.0-beta.29 => 1.0.0-beta.29
    @vue/web-component-wrapper:  1.2.0
    bootstrap-vue: 2.0.0-rc.21 => 2.0.0-rc.21
    eslint-plugin-vue:  4.7.1
    jest-serializer-vue:  2.0.2
    portal-vue:  2.1.5
    vue: ^2.6.8 => 2.6.10 (1.0.28)
    vue-axios: ^2.1.4 => 2.1.4
    vue-chartjs: ^3.3.2 => 3.4.2
    vue-clickaway: ^2.2.2 => 2.2.2
    vue-cropperjs: ^2.2.2 => 2.2.2
    vue-eslint-parser: ^6.0.4 => 6.0.4 (2.0.3)
    vue-functional-data-merge:  2.0.7
    vue-hot-reload-api:  2.3.3
    vue-i18n: ^7.8.1 => 7.8.1
    vue-jest:  3.0.4
    vue-js-toggle-button: ^1.3.2 => 1.3.2
    vue-loader: ^15.7.0 => 15.7.1
    vue-loading: ^0.1.4 => 0.1.4
    vue-lodash: ^2.0.0 => 2.0.2
    vue-multiselect: ^2.1.6 => 2.1.6
    vue-observe-visibility: ^0.4.3 => 0.4.4
    vue-router: ^3.0.1 => 3.0.7
    vue-session: ^1.0.0 => 1.0.0
    vue-style-loader: ^4.1.2 => 4.1.2
    vue-swatches: ^1.0.3 => 1.0.3
    vue-template-compiler: ^2.6.8 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
    vue-tippy: ^2.1.0 => 2.1.3
    vue2-dropzone: 3.5.2 => 3.5.2
    vuedraggable: ^2.16.0 => 2.23.0
    vuejs-datepicker: git https://github.com/brurubio/vuejs-datepicker.git#build => 1.3.3
    vuejs-jwt: ^1.1.0 => 1.1.0
    vuex: ^3.0.1 => 3.1.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

I just need to update style, html or JS code

What is expected?

That my application don't full reload each little update of style

What is actually happening?

Each time a change is detected the application rebuild (~3s) and the page reload.

---

When I was on webpack 2.7 everythings worked fined, now it takes longer to compile and detecting change recompile in ~3s instead of ~500ms.

My VueCLI config

module.exports = {
  devServer: {
    host: 'localhost',
    overlay: {
      warnings: true,
      errors: true
    }
  },
  transpileDependencies: ['vuex'],
  runtimeCompiler: true,
  productionSourceMap: false,
  chainWebpack: config => {
      config.module
        .rule('vue')
        .use('vue-loader')
          .loader('vue-loader')
          .options({
            prettify : false
          })
    }
}

[haoqunjiang]

Can't reproduce. Please provide a runnable reproduction as is required by the issue helper.

[BaptisteLemarcis]

I can't share my project as it's a work project but I will try to provide an example

EDIT :

I started a fresh project with :

vue create testhmr

I'm using babel and ESLint with standard config.
Here is my Vue Config

module.exports = {
    transpileDependencies: ['vuex'],
    runtimeCompiler: true,
    productionSourceMap: false,
    chainWebpack: config => {
        config.module
          .rule('vue')
          .use('vue-loader')
            .loader('vue-loader')
            .options({
              prettify : false
            })
      }
}

My package.json

{
  "name": "testhmr",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.5.4",
    "@babel/plugin-proposal-class-properties": "^7.5.0",
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/plugin-proposal-do-expressions": "^7.5.0",
    "@babel/plugin-proposal-export-default-from": "^7.5.2",
    "@babel/plugin-proposal-export-namespace-from": "^7.5.2",
    "@babel/plugin-proposal-function-bind": "^7.2.0",
    "@babel/plugin-proposal-function-sent": "^7.5.0",
    "@babel/plugin-proposal-json-strings": "^7.2.0",
    "@babel/plugin-proposal-logical-assignment-operators": "^7.2.0",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
    "@babel/plugin-proposal-numeric-separator": "^7.2.0",
    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
    "@babel/plugin-proposal-pipeline-operator": "^7.5.0",
    "@babel/plugin-proposal-throw-expressions": "^7.2.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-syntax-import-meta": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.5.0",
    "@babel/preset-env": "^7.5.4",
    "@babel/register": "^7.4.4",
    "@vue/cli-plugin-babel": "^3.9.2",
    "@vue/cli-plugin-eslint": "^3.9.2",
    "@vue/cli-plugin-unit-jest": "^3.8.0",
    "@vue/cli-service": "^3.8.4",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "autoprefixer": "^9.6.1",
    "babel-eslint": "^10.0.2",
    "babel-loader": "^8.0.6",
    "babel-plugin-lodash": "^3.3.4",
    "clean-webpack-plugin": "^3.0.0",
    "connect-history-api-fallback": "^1.5.0",
    "copy-webpack-plugin": "^5.0.3",
    "css-loader": "^3.0.0",
    "eslint": "^3.19.0",
    "eslint-config-standard": "^6.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-html": "^3.2.2",
    "eslint-plugin-promise": "^3.7.0",
    "eslint-plugin-standard": "^2.3.1",
    "eventsource-polyfill": "^0.9.6",
    "file-loader": "^4.0.0",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "html-webpack-plugin": "^3.2.0",
    "http-proxy-middleware": "^0.19.1",
    "mini-css-extract-plugin": "^0.7.0",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "prettier": "^1.18.2",
    "sass-loader": "^7.1.0",
    "sass-resources-loader": "^2.0.1",
    "style-loader": "^0.23.1",
    "svg-inline-loader": "^0.8.0",
    "url-loader": "^2.0.1",
    "vue-eslint-parser": "^6.0.4",
    "vue-loader": "^15.7.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.8",
    "webpack": "^4.35.3",
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2",
    "webpack-merge": "^4.2.1"
  }
}

Jest config

module.exports = {
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'vue'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest'
  },
  transformIgnorePatterns: [
    '/node_modules/'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  testURL: 'http://localhost/',
  watchPlugins: [
    'jest-watch-typeahead/filename',
    'jest-watch-typeahead/testname'
  ]
}

ESLint config

// http://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module',
    parser: 'babel-eslint'
  },
  env: {
    browser: true
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  rules: {
    'arrow-parens': 0,
    'generator-star-spacing': 0,
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-trailing-spaces': 0,
    indent: 0,
    'no-multiple-empty-lines': 0,
    'no-extra-parens': 0,
    'spaced-comment': 0,
    'block-spacing': 0,
    'padded-blocks': 0,
    'key-spacing': 0,
    'space-in-parens': 0,
    'no-unused-vars': 0,
    'no-undef': 0,
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

Babel config

module.exports = {
  presets: [
    ['@vue/app', {
      useBuiltIns: 'usage',
      modules: false
    }]
  ],
  plugins: [
    'lodash',
    ['@babel/plugin-transform-runtime'],
    // Stage 0
    '@babel/plugin-proposal-function-bind',

    // Stage 1
    '@babel/plugin-proposal-export-default-from',
    '@babel/plugin-proposal-logical-assignment-operators',
    ['@babel/plugin-proposal-optional-chaining', { loose: false }],
    ['@babel/plugin-proposal-pipeline-operator', { proposal: 'minimal' }],
    ['@babel/plugin-proposal-nullish-coalescing-operator', { loose: false }],
    '@babel/plugin-proposal-do-expressions',

    // Stage 2
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    '@babel/plugin-proposal-function-sent',
    '@babel/plugin-proposal-export-namespace-from',
    '@babel/plugin-proposal-numeric-separator',
    '@babel/plugin-proposal-throw-expressions',

    // Stage 3
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-syntax-import-meta',
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    '@babel/plugin-proposal-json-strings'
  ]
}

BrowserList

> 1%
last 2 versions
ie 11

PostCSS

module.exports = {
  plugins: {
    autoprefixer: {}
  }
}

With this configuration and nearly empty project the page is reloaded each minor modification. With the fresh start only (without my project configuration) It's not.

I know my ESLint rules are old, I'm updating them soon but I don't think it's the problem.

[xzdm]

I had the same problem, bro

[vue-bot]

Hello!
This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues requiring feedback after 20 days of inactivity. It’s been at least 10 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. (A maintainer can also add the label not stale to keep this issue open.)

Thanks for being a part of the Vue community! 💪💚️

[cuongdevjs]

how to resolve it? I have same problem. It's really make my performance slowly so much. Can help?

[xzdm]

how to resolve it? I have same problem. It's really make my performance slowly so much. Can help?

you can create a new project, and migrate your original business logic to this new project. I solved in this way

[cuongdevjs]

how to resolve it? I have same problem. It's really make my performance slowly so much. Can help?

you can create a new project, and migrate your original business logic to this new project. I solved in this way

so it's really hard to make, project so big and complicate now

[BaptisteLemarcis]

We discovered the problem, it was the webpack package in the package.json. It was a webpack problem!

    "webpack": "^4.35.3",
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2",
    "webpack-merge": "^4.2.1"

Theses lines were remove as VueCLI include the right version.
Then delete package-lock.json and node_modules to reinstall all package with npm i.

That fix my problem

[cuongdevjs]

We discovered the problem, it was the webpack package in the package.json. It was a webpack problem!

    "webpack": "^4.35.3",
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2",
    "webpack-merge": "^4.2.1"

Theses lines were remove as VueCLI include the right version.
Then delete package-lock.json and node_modules to reinstall all package with npm i.

That fix my problem

If i delete package-lock, have affect to my project, because it's on production?