Vue-loader: HMR stoped working on upgrade from 12.2.1 to 13

[select]

Version

13.0.0

Reproduction link

https://github.com/select/audius

Steps to reproduce

git clone [email protected]:select/audius.git
cd audius
npm i
npm start

HMR works for components e.g. src/components/about-player.vue

npm i -D [email protected]

HMR stops workging

What is expected?

HMR updates work

What is actually happening?

HRM updates are shown in console but are not applied

---

As mentioned above the curious thing is that I can see the HMR update arrive in the browser but does not seem to update the page.

[LinusBorg]

Have you read the release notes and fixed any code that may be affected by the documented breaking changes?

I installed your repo but npm start doesn't work for me:

****:audius ****$ npm start

> [email protected] start /Users/****/Documents/WebDev/Projects/Tests/audius
> ./server

env: nodejs: No such file or directory
npm ERR! file sh
npm ERR! code ELIFECYCLE
 ....

file is there, tough. Probably something about bash which I totally suck at.

[select]

Hey thanks, the answer was much quicker than I expected.

I looked at the release notes and just saw that using the new import syntaxt for async imports is now mandatory. I used that already so I should be fine.

I also updated the start script to call the dev server with node directly. There is always an issue since ubuntu installs node as nodejs executable which always causes compatibility issues with all other os installing it as node.

So git pull should make it work.

[chavyleung]

same problem when 12.2.1 to 13
browser received the HMR response，but do not update the dom

it work when i rollback to 12.2.1

sorry my english

[Allenice]

I encountered the same problem --0--

[evenfrost]

Can confirm upgrading to 13.0.0 has broken HMR for me. Falling back to 12 fixed the issue.

[imcvampire]

I confirm this problem after upgrading to 13.0.0

[donnysim]

Same here, where it worked without problems with 12.2.1 now I get

 error  in js/[name].js

Cannot map to variable name in module components\sidebar\SidebarItem.vue (export 'default')

but nothing changed, there is only 1 import of SidebarItem.vue and it's imported as import SidebarItem from './SidebarItem.vue';

And HMR does not work even though it says it updated the modules in the console.

[donnysim]

Removing webpack.optimize.ModuleConcatenationPlugin removes the error, but hmr still doesn't work.

[tahnik]

Can confirm this. Was hitting my head on the wall for 3 hours :(

[LinusBorg]

Hey, just to let you guys know:

We are sorry that HMR seems to have problems for many of you. We don'T have these problems in the tests for vue-loader itself so it must be some config/plugin conmbination that we are trying to track.

For that it would be helpful to know what config you are working with? Who's on vue-cli/webpack ? Who si using some config of their own?

/ping @fnlctrl

[evenfrost]

Here's my webpack.config.js:

const { resolve } = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer-stylus');
const stylusLoader = require('stylus-loader');
const combineLoaders = require('webpack-combine-loaders');

const { PORT } = process.env;

const rootResolve = pathname => resolve(__dirname, 'new-client', pathname);

const commonStylusLoaders = [
  { loader: 'style-loader', options: { sourceMap: true } },
  { loader: 'css-loader', options: { sourceMap: true } },
  { loader: 'postcss-loader', options: { sourceMap: true } },
  { loader: 'stylus-loader', options: { sourceMap: true } },
];

module.exports = {
  entry: [
    'babel-polyfill',
    'webpack-hot-middleware/client?reload=true',
    rootResolve('index.js'),
  ],
  output: {
    path: rootResolve('public'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  devtool: 'inline-source-map',
  module: {
    rules: [{
      test: /\.js$/,
      use: {
        loader: 'babel-loader',
      },
      exclude: /node_modules|localforage/,
    }, {
      test: /\.vue$/,
      exclude: /node_modules/,
      use: {
        loader: 'vue-loader',
        options: {
          loaders: {
            html: 'pug-html-loader',
            // see:
            // https://github.com/vuejs/vue-loader/issues/673
            // https://github.com/vuejs/vue-loader/issues/536
            css: combineLoaders(commonStylusLoaders),
          },
        },
      },
    }, {
      test: /\.pug$/,
      use: {
        loader: 'pug-loader',
      },
    }, {
      test: /\.styl$/,
      use: commonStylusLoaders,
    }, {
      test: /\.svg$/,
      use: {
        loader: 'vue-svg-loader',
      },
    }, {
      test: /\.(eot|svg|ttf|woff|woff2)$/,
      loader: 'file-loader?name=[name].[ext]',
    }],
    noParse: /node_modules\/localforage\/dist\/localforage.js/,
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new HtmlWebpackPlugin({
      template: rootResolve('index.pug'),
    }),
    new stylusLoader.OptionsPlugin({
      default: {
        use: [autoprefixer({
          browsers: ['last 2 versions'],
        })],
        import: rootResolve('styles/utils.styl'),
        sourceMap: true,
      },
    }),
  ],
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.js',
      icons: 'evil-icons/assets/icons',
    },
    extensions: ['*', '.js', '.vue', '.styl', '.svg'],
    modules: [
      rootResolve('.'),
      'node_modules',
    ],
  },
  devServer: {
    compress: true,
    port: +PORT || 3000,
  },
};

[johnwebbcole]

I'm using the vue init webpack version and upgrading to 13 has broken HMR for my template sections, but not my script section.

I created a new project using vue init webpack which uses vue-loader 12, confirmed it worked. Changed vue-loader to 13, rimraf'ed node_modules and package-lock.json and npm installed. HMR in the template section is broken, but not in the script seciton.

node 8.1.3, npm 5.0.3 on Windows 10, using git-bash shell.

[egoist]

@LinusBorg hmr is only broken in the <template> tag, a minimal repo here:

https://gist.github.com/egoist/5fabf27fed3c1761710fd101f282bb42

[galenjiang]

I have the same problem.

[tahnik]

What's interesting is that for me at least, the view updates if I add a new line to remove lines, but doesn't update if I make changes in the same line.

[egoist]

FYI, I made a PR already https://github.com/vuejs/vue-loader/pull/874

[dwqs]

I have the same problem. But when I set the esModule option to false, HMR works right!

// ...
rules: [{
    test: /\.vue$/,
    use: [{ loader: 'vue-loader', options:  {esModule: false} }]
}]
// ...

For vue-loader 13, the esModule option default is true. Here is the release note

[egoist]

@dwqs see my last comment

[ruchern-chong]

Sorry to butt in. I cannot see a 13.0.1 in the release section at time of posting of this git repo but npm is telling me that there is an update for vue-loader to 13.0.1

I guess this is the hotfix? @yyx990803

Edit: Forget what I've said. Saw the commits added after the 13.0.0 release and indeed 13.0.1 is the hot fix for this hmr issue.