Workaround for [LazyCompilationBackend] Error: read ECONNRESET when using Webpack 5 lazy compilation

[mimifuwacc]

The Problem

Using lazyCompilation in Storybook config (.storybook/main.js)

lazyCompilation: true // or {imports: true}

triggers too many concurrent network requests as Webpack tries to handle every dynamic import on-demand.

I think this becomes especially problematic in Storybook, because it handles hundreds of individual stories and complex dependency trees. It seems that this leads to a massive spike in connections that overwhelms the backend. In my case, this "request flood" appeared to be the root cause of the connection reset (ECONNRESET).

The Workaround

The solution is to reduce the granularity of the lazy compilation by focusing on entries instead of imports.

In your .storybook/main.js:

// .storybook/main.js
export default {
  webpackFinal: async (config) => {
    config.experiments = {
      ...config.experiments,
      lazyCompilation: {
        // Disabling 'imports' avoids the request flood and improves stability.
        imports: false, 
        // Enabling 'entries' still allows on-demand building per Story.
        entries: true,
      },
    };
    return config;
  },
};

Result

By switching to entries: true, the number of simultaneous connections is significantly reduced. In my environment, this stopped the crashes while maintaining the benefit of fast, on-demand builds.

Hope this helps anyone struggling with similar stability issues!

[harshagarwalnyu]

Good workaround — confirmed correct. Here's the explanation of why it works in case it helps others.

Why lazyCompilation: true causes ECONNRESET in Storybook

lazyCompilation: true is shorthand for { imports: true, entries: true }. With imports: true, Webpack intercepts every dynamic import() statement in your code and routes it through the LazyCompilationBackend HTTP server. In a Storybook project with hundreds of stories, each story file may contain dozens of dynamic imports (component imports, decorator imports, addon imports). On startup, all of these resolve simultaneously, creating a flood of HTTP requests to the backend — far more than the default http.maxConnections limit. The backend gets overwhelmed and starts resetting connections.

Why { imports: false, entries: true } fixes it

With imports: false, Webpack only lazy-compiles at the entry point granularity — one entry per story bundle, not one request per import() statement. The number of requests drops from O(total dynamic imports across all stories) to O(number of story files), which is far more manageable.

Additional tuning if you still see instability

You can further control which entries get lazy-compiled:

lazyCompilation: {
  entries: true,
  imports: false,
  test: /src\/.*\.stories\.[jt]sx?$/,  // only lazy-compile story files
},

This restricts lazy compilation to story entry points and compiles everything else eagerly, which can improve stability further at the cost of slightly slower initial startup.