webpack-contrib / webpack-hot-client

webpack HMR Client
MIT License
121 stars 45 forks source link

Crash, invalid hook returns number as filePath #107

Open javiertury opened 5 years ago

javiertury commented 5 years ago

Expected Behavior

I expect that webpack hot client updates normally.

Actual Behavior

After functioning correctly for a while, it crashes semi-randomly. The crash is produced because the function invalid in webpack-hot-client/lib/index.js expects filePath to be a string, but it was the number 1552056541813 at the time of crash.

<path>/node_modules/webpack-hot-client/lib/index.js:49
      .replace(context, '')
       ^

TypeError: (filePath || "<unknown>").replace is not a function
    at invalid (<path>/node_modules/webpack-hot-client/lib/index.js:49:8)
    at comp.hooks.invalid.tap (<path>/node_modules/webpack-hot-client/lib/index.js:65:7)
    at SyncHook.eval [as call] (eval at create (<path>/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Watchpack.watcher.compiler.watchFileSystem.watch (<path>/node_modules/webpack/lib/Watching.js:139:33)
    at Object.onceWrapper (events.js:317:30)
    at emitTwo (events.js:126:13)
    at Watchpack.emit (events.js:214:7)
    at Watchpack._onChange (<path>/node_modules/watchpack/lib/watchpack.js:118:7)
    at Watchpack.<anonymous> (<path>/node_modules/watchpack/lib/watchpack.js:109:8)
    at emitOne (events.js:116:13)
    at Watcher.emit (events.js:211:7)
    at DirectoryWatcher.<anonymous> (<path>/node_modules/watchpack/lib/DirectoryWatcher.js:238:13)
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
    at process._tickCallback (internal/process/next_tick.js:181:9)

Why does webpack return a number as filePath? I don't know, perhaps it is due to:

Code

module.exports = function createWebpackHotCompiler (config) {
  Object.keys(config.entry).forEach(entryName => {
    if (! Array.isArray(config.entry[entryName])) {
      config.entry[entryName] = [config.entry[entryName]];
    }
  });

  const compiler = webpack(config);
  webpackHotClient(compiler, { port: 9090 });

  const middleware = webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
  });

  return {
    compiler,
    middleware,
  };
};

How Do We Reproduce?

// webpack-config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin');
const HTMLPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    app: './app/entry-client.js'
  },
  output: {
    filename: '../ssr/bundle.json',
    path: './assets',
    publicPath: '/assets',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.s?css$/,
        use: [ 'vue-style-loader', 'css-loader', 'sass-loader' ]
      },
      {
        test: /\.styl(us)?$/,
        use: [ 'vue-style-loader', 'css-loader', 'stylus-loader' ]
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new VuetifyLoaderPlugin(),
    new VueSSRClientPlugin({
      filename: '../ssr/clientManifest.json',
    }),
    new HTMLPlugin({
      template: '../template-no-ssr.html',
      filename: 'index.html',
      inject: 'body',
      showErrors: false,
    }),
  ],
};
aleksandr-gorokhov commented 3 years ago

Same issue