Hot reloading always doing a full page reload

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
          })
    }
}

[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?

[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.