Dev server fails to reload with "address already in use :::3000"

[jakubsacha]

Describe the bug
Dev server fails to reload with error: "address already in use :::3000"

Logs

src/components/molecules/QueryInputSearchSuggestions.svelte changed. rebuilding...
Attempt...
✔ server (1.8s)
✔ client (1.8s)
events.js:186
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE: address already in use :::3000
    at Server.setupListenHandle [as _listen2] (net.js:1298:14)
    at listenInCluster (net.js:1346:12)
    at Server.listen (net.js:1434:7)
    at Polka.listen (/Users/jsacha/src/feather/node_modules/polka/index.js:53:22)
    at eval (webpack:///./src/server.js?:23:3)
    at Module../src/server.js (/Users/jsacha/src/feather/__sapper__/dev/server/server.js:550:1)
    at __webpack_require__ (/Users/jsacha/src/feather/__sapper__/dev/server/server.js:27:30)
    at /Users/jsacha/src/feather/__sapper__/dev/server/server.js:118:18
    at Object.<anonymous> (/Users/jsacha/src/feather/__sapper__/dev/server/server.js:121:10)
    at Module._compile (internal/modules/cjs/loader.js:936:30)
Emitted 'error' event on Server instance at:
    at emitErrorNT (net.js:1325:8)
    at processTicksAndRejections (internal/process/task_queues.js:80:21) {
  code: 'EADDRINUSE',
  errno: 'EADDRINUSE',
  syscall: 'listen',
  address: '::',
  port: 3000
}
> Server crashed

Configs

const webpack = require("webpack");
const path = require("path");
const config = require("sapper/config/webpack.js");
const pkg = require("./package.json");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const mode = process.env.NODE_ENV;
const dev = mode === "development";

const alias = { svelte: path.resolve("node_modules", "svelte") };
const extensions = [".mjs", ".js", ".json", ".svelte", ".html"];
const mainFields = ["svelte", "module", "browser", "main"];
const { sass } = require("svelte-preprocess-sass");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;

const purgecss = require("@fullhuman/postcss-purgecss")({
  // Specify the paths to all of the template files in your project
  content: [
    "./src/**/*.svelte",
    "./src/**/*.html"
    // etc.
  ],

  // Include any special characters you're using in this regular expression
  defaultExtractor: require("purgecss-from-svelte")
});

const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserJSPlugin = require("terser-webpack-plugin");

module.exports = {
  client: {
    entry: config.client.entry(),
    output: config.client.output(),
    resolve: { alias, extensions, mainFields },
    module: {
      rules: [
        {
          test: /\.svg$/,
          loader: 'svg-inline-loader'
        },
        { test: /\.gql?$/, use: { loader: "graphql-tag/loader" } },
        {
          test: /\.(svelte|html)$/,
          use: {
            loader: "svelte-loader",
            options: {
              dev,
              hydratable: true,
              hotReload: false,
              preprocess: {
                style: sass({
                  includePaths: ["node_modules"]
                })
              },
              emitCss: true
            }
          }
        },
        {
          test: /\.css$/,
          // exclude: /node_modules/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
              options: { hmr: false }
            },
            "css-loader",
            {
              loader: "postcss-loader",
              options: {
                ident: "postcss",
                plugins: [
                  require("tailwindcss"),
                  require("autoprefixer"),
                  ...(!dev ? [purgecss] : [])
                ]
              }
            }
          ]
        }
      ]
    },
    mode,
    plugins: [
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // all options are optional
        filename: dev ? "[name].css" : "[name].[hash].css",
        chunkFilename: dev ? "[id].css" : "[id].[hash].css",
        ignoreOrder: false // Enable to remove warnings about conflicting order
      }),
      // pending https://github.com/sveltejs/svelte/issues/2377
      // dev && new webpack.HotModuleReplacementPlugin(),
      new webpack.DefinePlugin({
        "process.browser": true,
        "process.env.NODE_ENV": JSON.stringify(mode)
      }),
      ...(!dev
        ? [
          new BundleAnalyzerPlugin({
            analyzerMode: "static",
            generateStatsFile: true,
            openAnalyzer: false
          })
        ]
        : [])
    ].filter(Boolean),
    optimization: {
      minimizer: !dev
        ? [new TerserJSPlugin({}), new OptimizeCssAssetsPlugin({})]
        : []
    },
    devtool: dev && "inline-source-map"
  },

  server: {
    entry: config.server.entry(),
    output: config.server.output(),
    target: "node",
    resolve: { alias, extensions, mainFields },
    externals: Object.keys(pkg.dependencies).concat("encoding"),
    module: {
      rules: [
        {
          test: /\.svg$/,
          loader: 'svg-inline-loader'
        },
        { test: /\.gql?$/, use: { loader: "graphql-tag/loader" } },
        {
          test: /\.(svelte|html)$/,
          use: {
            loader: "svelte-loader",
            options: {
              css: false,
              generate: "ssr",
              dev,
              preprocess: {
                style: sass({
                  includePaths: ["node_modules"]
                })
              }
            }
          }
        }
      ]
    },
    mode: process.env.NODE_ENV,
    performance: {
      hints: false // it doesn't matter if server.js is large
    }
  }

  // serviceworker: {
  //   entry: config.serviceworker.entry(),
  //   output: config.serviceworker.output(),
  //   mode: process.env.NODE_ENV
  // }
};

Information about your Sapper Installation:

• Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10)
• n/d
• Your operating system: (e.x. OS X 10, Ubuntu Linux 19.10, Windows XP, etc)
  osx
• Your hosting environment: (i.e. Local, GCP, AWS, Now, etc...)
  local
• Sapper version (Please check you can reproduce the issue with the latest release!)
  0.27.9
• Svelte version (Please check you can reproduce the issue with the latest release!)
  3.12.1
• If it is an exported (npm run export) or dynamic application.
  dynamic
• Whether your application uses Webpack or Rollup
  webpack

Severity
annoying

[agustinl]

Hi @jakubsacha , maybe other process are using the port 3000
You can try change the port number here:

Inside the server.js file

I hope you are still well

[jakubsacha]

this happens on the dev server.

My best bet is that issue is here:

dev.ts

ports
              .wait(this.port)
              .then(() => {
                      ...
              })

We don't have a lock here. I think it happens when user hits ctrl+s multiple times in small interval. Possibly trigger this twice and introduce race condition. when two servers are started at the same time.

[soullivaneuh]

To confirm, I got the issue recently. I had to kill everything and start it again.

[Sidd27]

Sometimes even after closing the process with ^C also doesn't work the process is still running need to kill

[mattpilott]

Im also now seeing this more frequently, not sure if something changed recently that makes this more likely to happen

[Conduitry]

Fixed in 0.27.14.