Crash with "req.handle.writev is not a function" on Socket.Writable.uncork

[Jessidhia]

• Version: 10.6.0
• Platform: Darwin 18.0.0 Darwin Kernel Version 18.0.0: Wed Jun 27 22:28:20 PDT 2018; root:xnu-4903.200.274.31.2~2/RELEASE_X86_64 x86_64
• Subsystem: net

This is a node internal crash that happens with webpack-dev-server, likely with any config, only when running on node 10.6.0:

internal/stream_base_commons.js:59
  var err = req.handle.writev(req, chunks, allBuffers);
                       ^

TypeError: req.handle.writev is not a function
    at writevGeneric (internal/stream_base_commons.js:59:24)
    at Socket._writeGeneric (net.js:758:5)
    at Socket._writev (net.js:767:8)
    at doWrite (_stream_writable.js:408:12)
    at clearBuffer (_stream_writable.js:517:5)
    at Socket.Writable.uncork (_stream_writable.js:314:7)
    at connectionCorkNT (_http_outgoing.js:646:8)
    at process._tickCallback (internal/process/next_tick.js:63:19)

The same webpack-dev-server with the same config has no crash on node 10.4.1 and runs successfully.

[gireeshpunathil]

a minimal reproduce please?

[MymmiJ]

Not OP & don't have a minimal reproduce as such unfortunately, but I'm having the same problem on my local build (Mac OS X v 10.13.4) and others have verified on the same OS. Seems to happen on build while building the ttf2woff2 module, and while running it happens with some XHRs that timeout, but sometimes it just appears to fall over with no consistent pattern. It doesn't happen every time that we build using 10.6.0, but if it doesn't happen during build it always happens at some point while running, usually within 5-20 minutes.

Building the ttf2woff2 module is the longest stage of our build process and therefore it may be just a coincidence that this error tends to throw during this particular stage (i.e. it could happen any time but this is the time it's most likely to happen statistically), or it may be that long-running processes themselves cause the issue. This is about as helpful as I can get I'm afraid, it's all I can tell from where I'm sat.

We're currently just reverting to an earlier version, we haven't found a reliable workaround.

[Jesseppi]

Im getting the same issue.
Version: 10.6.0
Platform: OSX HighSierra 10.13.6

when running webpack-dev-server, and seems to only happen when im accessing the page from IOS device.

[addaleax]

Since this already has 18 upvotes: Please provide a way to reproduce this. It seems like enough people are running into this issue to make that possible…

[WesSouza]

Boy this is complicated.

I was able to create a reproducible flow for this:

1. Clone and npm install this https://github.com/WesleydeSouza/subway-time
2. Run HTTPS=1 node scripts/start.js
3. Using an iOS device or simulator navigate to https://[IP]:3000
4. Calls will start to fail

5. Trying to run the server again will fail because the client still calls /eventsource repeatedly, which immediately crashes the server again.

I'm on macOS 10.14 18A326h (Mojave), and tested on iOS 11.4 simulator and a device with iOS 12, always with the same results. Desktop Chrome doesn't trigger this problem.

[danyim]

I ran into this issue when I was running Node 10 in a new shell while trying to start a Node 7 project. Try rm -rf node_modules && nvm use 7 && yarn install if all else fails.

[YvanGuidoin]

Same issue running Node v10.7.0 on Ubuntu 18.04, with the latest webpack-dev-server, and accessing with Chromium

[lundibundi]

@YvanGuidoin is it possible for you to provide what are you actually running with the webpack-dev-server? As it seems that we may be able to reproduce your case much more easily than @wesleydesouza one (I actually tried that one with MacOS in VBox but I guess it's outdated enough to not trigger this bug).

[geminiyellow]

same, webpack-dev-server down.

    "webpack": "3.8.1",
    "webpack-dev-server": "2.9.4",

[WellspringCS]

same. Windows 10 Node v10.7.0 using angular
"@angular-devkit/build-angular": "~0.6.8",
"@angular/cli": "^6.0.8",
"@angular/compiler-cli": "6.0.9",
rebooted my machine and the problem is gone.

For now.

[YvanGuidoin]

@lundibundi I can't give you access to the code sorry ;) but I cleaned our webpack config from the "private" parts so you can see it

const path = require("path");
const webpack = require("webpack");
const autoprefixer = require("autoprefixer");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const OfflinePlugin = require("offline-plugin");
const WebpackPwaManifest = require("webpack-pwa-manifest");
const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

const confHotReload = {
  contentBase: path.resolve(__dirname, "dist"),
  compress: false,
  historyApiFallback: true,
  hot: true,
  https: true,
  index: "index.html",
  open: false,
  inline: true,
  overlay: true,
  watchOptions: {
    poll: true,
    ignored: [/node_modules/, "**/*.d.ts"],
  },
  port: 9000,
  proxy: {
    // some apis
  },
};
const configProxy = {
  target: "https://localhost/",
  secure: false,
  changeOrigin: true,
  ws: true,
  proxyTimeout: 60000,
};

const getPlugins = function getPlugins(isProd, isHot) {
  const pluginsProduction = [
    new CleanWebpackPlugin(["dist/*"]),
    new LodashModuleReplacementPlugin(),
    new OfflinePlugin({
      appShell: "/",
      externals: ["https://fonts.googleapis.com/css?family=Montserrat", "/"],
      ServiceWorker: {
        minify: true,
        events: true,
      },
      autoUpdate: true,
      AppCache: false,
      excludes: ["**/*.d.ts", "**/locale/*.js"],
    }),
    new WebpackPwaManifest({
      name: "Test",
      short_name: "Test",
      background_color: "#ffffff",
      fingerprints: true,
      inject: true,
      theme_color: "#ff7f27",
      start_url: "/",
      icons: [
        {
          src: path.resolve("public/splash.png"),
          sizes: [36, 128, 192, 256, 384, 512], // multiple sizes
        },
      ],
    }),
    new BundleAnalyzerPlugin({
      analyzerMode: "static",
      openAnalyzer: false,
      logLevel: "error",
    }),
  ];

  const commonsPlugins = [
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify(isProd ? "production" : "development"),
        BROWSER: true,
      },
      DOMAIN_API: JSON.stringify(process.env.DOMAIN_API),
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), // not included in bundle
    new HtmlWebpackPlugin({
      template: "public/index.html",
      filename: "index.html",
      inject: true,
      chunksSortMode: "none",
      cache: isHot,
      minify: {
        preserveLineBreaks: true,
        html5: true,
        removeComments: false,
        collapseWhitespace: true,
      },
      favicon: "public/favicon.png",
    }),
    new HtmlWebpackPlugin({
      template: "public/unsupported.html",
      filename: "unsupported.html",
      inject: false,
      chunksSortMode: "none",
      cache: isHot,
      minify: {
        preserveLineBreaks: true,
        html5: true,
        removeComments: false,
        collapseWhitespace: true,
      },
      favicon: "public/favicon.png",
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css",
    }),
    new CopyWebpackPlugin([
      {
        context: "node_modules/moment/locale",
        from: "*",
        to: "./locale/",
      },
      {
        context: "node_modules/videojs-contrib-hls/dist",
        from: "videojs-contrib-hls.min.js",
        to: "./videojs/",
      },
      {
        context: "node_modules/video.js/dist",
        from: "video.min.js",
        to: "./videojs/",
      },
      {
        context: "public/",
        from: "robots.txt",
        to: ".",
      },
    ]),
  ];
  if (isHot) {
    commonsPlugins.push(new webpack.HotModuleReplacementPlugin());
  }
  const pluginsToUse = isProd ? [...commonsPlugins, ...pluginsProduction] : commonsPlugins;
  return pluginsToUse;
};
const aliases = {
  moment$: "moment/moment",
  "react-loadable": "@7rulnik/react-loadable",
  // ... private aliases for modules
};

const webpackStatsProd = {
  children: true,
  chunks: false,
  chunkModules: false,
  chunkOrigins: false,
  optimizationBailout: true,
  source: false,
};

module.exports = function(env) {
  const isHot = (env && env.hot) || false;
  const isProd = (!isHot && (env && env.production)) || false;

  const pluginsToUse = getPlugins(isProd, isHot);

  return {
    cache: !isProd,
    devtool: false,
    mode: !isProd ? "development" : "production",
    stats: isProd ? webpackStatsProd : "minimal",
    entry: path.resolve(__dirname, "src", "check.ts"),
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: isProd ? "[chunkhash].js" : "[name].bundle.js",
      chunkFilename: isProd ? "[chunkhash].chunk.js" : "[name].chunk.js",
      pathinfo: !isProd,
    },
    devServer: confHotReload,
    performance: {
      hints: isProd ? "warning" : false,
    },
    optimization: {
      splitChunks: { chunks: "all", cacheGroups: {} },
      sideEffects: false,
      minimize: isProd,
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            ecma: 7,
          },
          cache: false,
          parallel: true,
          sourceMap: false,
        }),
      ],
      runtimeChunk: false,
      concatenateModules: isProd,
    },
    resolve: {
      extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
      mainFields: ["module", "browser", "main"],
      alias: aliases,
      modules: [path.resolve(__dirname, "node_modules")],
    },
    target: "web",
    module: {
      rules: [
        {
          test: function(modulePath) {
            return (
              modulePath.endsWith(".ts") | modulePath.endsWith(".tsx") &&
              !(modulePath.endsWith("test.ts") | modulePath.endsWith("test.tsx"))
            );
          },
          use: [
            {
              loader: "babel-loader",
              options: {
                cacheDirectory: !isProd,
              },
            },
            "ts-loader",
          ],
          include: /src/,
          exclude: /node_modules/,
        },
        {
          test: /\.(js|jsx)$/,
          use: {
            loader: "babel-loader",
            options: {
              cacheDirectory: !isProd,
            },
          },
          include: /src/,
          exclude: /node_modules/,
        },
        {
          test: /\.css$/,
          use: [
            isHot ? { loader: "style-loader", options: { hmr: true } } : MiniCssExtractPlugin.loader,
            { loader: "css-loader", options: { minimize: isProd } },
            // {
            //   loader: "postcss-loader",
            //   options: {
            //     plugins: [autoprefixer],
            //   },
            // },
          ],
        },
        {
          test: /\.scss$/,
          use: [
            isHot ? { loader: "style-loader", options: { hmr: true } } : MiniCssExtractPlugin.loader,
            {
              loader: "typings-for-css-modules-loader",
              query: {
                modules: true,
                localIdentName: isProd ? "[hash:base64:10]" : "[name]__[local]",
                camelCase: false,
                namedExport: true,
                banner:
                  "// This file is automatically generated by typings-for-css-modules.\n// Please do not change this file!",
              },
            },
            {
              loader: "postcss-loader",
              options: {
                plugins: [autoprefixer],
              },
            },
            {
              loader: "sass-loader",
              query: {
                modules: true,
              },
            },
          ],
        },
        {
          test: /\.(jpe?g|png|gif|ogg|mp4|woff|woff2|ttf|eot)$/i,
          use: {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "assets/",
            },
          },
        },
        {
          test: /\.svg/,
          use: [
            {
              loader: "file-loader",
              options: {
                name: "[name].[ext]",
                outputPath: "assets/",
              },
            },
            {
              loader: "svgo-loader",
              options: {
                plugins: [
                  { removeTitle: true },
                  { cleanupAttrs: true },
                  { removeComments: true },
                  { removeUnknownsAndDefaults: true },
                  { removeDesc: true },
                  { convertColors: { shorthex: false } },
                  { convertPathData: false },
                ],
              },
            },
          ],
        },
      ],
    },
    plugins: pluginsToUse,
  };
};

and the error I have

ℹ ｢wdm｣: Compiled successfully.
internal/stream_base_commons.js:59
  var err = req.handle.writev(req, chunks, allBuffers);
                       ^

TypeError: req.handle.writev is not a function
    at writevGeneric (internal/stream_base_commons.js:59:24)
    at Socket._writeGeneric (net.js:759:5)
    at Socket._writev (net.js:768:8)
    at doWrite (_stream_writable.js:408:12)
    at clearBuffer (_stream_writable.js:517:5)
    at Socket.Writable.uncork (_stream_writable.js:314:7)
    at connectionCorkNT (_http_outgoing.js:644:8)
    at process._tickCallback (internal/process/next_tick.js:63:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR!<[project]>@1.1.0 start: `DOMAIN_API=localhost:9000 webpack-dev-server --env.hot`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the <[project]>@1.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Edit: Two of webpack dev server proxy path are used for Websocket connections to our backend launched in Docker locally, don't know if that might have an impact?

[addaleax]

@YvanGuidoin Do you think you could work out a full reproduction based on this?

[YvanGuidoin]

@addaleax Tried to recreate a cleaned reproduction, but it isn't happening wihout the backend, and tried to recreate it with clean code (create-react-app) and a websocket server it's not happening either (even when calling 9/10 websocket in parallel per browser) ><

[addaleax]

@YvanGuidoin Can you provide other information about the issue? Maybe you could attach the inspector to the Node process and see what the actual values of req.handle/req.handle.writev are?