webpack-hot-client icon indicating copy to clipboard operation
webpack-hot-client copied to clipboard

Crash, invalid hook returns number as filePath

Open javiertury opened this issue 7 years ago • 1 comments

  • Operating System: Fedora 29
  • Node Version: 10.15.0
  • NPM Version: 6.4.1
  • webpack Version: 4.28.4
  • webpack-hot-client Version: 4.1.1

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:

  • Using webpack chucks
  • Using default memory-fs as filesystem
  • Editing the entry file
  • In a directory watched by webpack, editing a file not included in the compilation .

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,
    }),
  ],
};

javiertury avatar Mar 08 '19 15:03 javiertury

Same issue

aleksandr-gorokhov avatar Jun 02 '21 10:06 aleksandr-gorokhov