webpack-dev-server: Cannot use [chunkhash] when I run: webpack-dev-server --hot

I’m getting the following error when I run webpack-dev-server --hot.

ERROR in chunk vendor [entry]
[name].[chunkhash].js
Cannot use [chunkhash] for chunk in '[name].[chunkhash].js' (use [hash] instead)

I do not get this error if I run webpack-dev-server without the --hot flag, or if I just run webpack to build the files.

This is my config file:

var baseConfig = {
  resolve: {
    root: [__dirname],
  },

  entry: {
    app: [
      'showroom/app.js',
      'showroom/index.html',
    ],
    vendor: [
      'react',
      'react-dom',
      'babel-polyfill',
    ],
  },

  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js',
    path: 'dist',
  },

  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|dist)/,
        loader: 'babel-loader',
        query: {
          plugins: ['transform-runtime'],
          presets: ['es2015', 'react'],
        }
      },
      {
        test: /\.html$/,
        loader: 'file?name=[name].[ext]',
      },
      {
        test: /\.less$/,
        loader: 'style!css!less'
      },
    ],
  },

  plugins: [
    // Without these 2 plugins the vendor hash changes every time the app
    // changes, even though there are no changes to the vendor.
    // https://github.com/webpack/webpack/issues/1315
    new WebpackMd5Hash(),
    new webpack.NamedModulesPlugin(),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: '[name].[chunkhash].js',
      minChunks: Infinity,
    }),

    new HtmlWebpackPlugin({
      template: 'showroom/index.html',
      filename: 'index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
      },
    }),
  ]
};

Is this expected behaviour, or a bug?

  • webpack: 1.12.11
  • webpack-dev-server: 1.14.1

If it’s not expected behaviour, I’d be happy to strip down this config file and create a minimal github repo that reproduces this bug.

Also - I wasn’t sure whether to report this in webpack-dev-server or in webpack.

Thanks!

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 22
  • Comments: 15 (3 by maintainers)

Commits related to this issue

Most upvoted comments

Closing this, because you should not use [chunkhash] or [hash] for development. This will cause many other issues, like a memory leak, because the dev server does not know when to clean up the old files.

I am working on documenting this, because this has caused many issues.

The issue is closed, but no any solution has been provided. How do you solve the problem? So far I have come up with the following code in my webpack config:

filename: `[name]${isDev ? '' : '[chunkhash:8]'}.js`,

Does any of you know better solution?

Folks, I’m interested about memory leak when hash is used. Memory leak in what? Is there any bug ticket related to the memory leak when hash is used? I’d like to read more about it. Thank you.

I understand this is closed. But I would like to add a scenario that it would have been helpful if we could disable cache for dev server. I am developing a Atalssian plugin, during local/integration test, I expose my local server to the internet with Ngrok (or something similar). If the file is cached, I will not be able to test it.

@SpaceK33z looking at adopting this pattern for our own project but I have a question: if the bundle no longer has a hash in the name, how do we prevent the browser from caching a stale version of the bundle from a previous run?