Webpack 4.41.6是否polyfill async_hooks？Storybook构建报错求助

在维护一个旧项目时，使用自定义Webpack配置运行Storybook遇到了以下错误：

ERROR in ./node_modules/asynchronous-local-storage/dist/lib/als.js
Module not found: Error: Can't resolve 'async_hooks' in 'C:\Users\Martin\Documents\censored\censored\node_modules\asynchronous-local-storage\dist\lib'

async_hooks是Node.js核心模块，无法在浏览器环境中直接访问。我原本以为Webpack会自动对这类模块做polyfill，于是尝试修改配置：

config.target = "node";

该设置虽然消除了上述错误，但打包后的代码针对Node.js优化，导致Storybook在浏览器中运行时抛出：

Uncaught ReferenceError: exports is not defined

目前我在应用中通过环境判断引入依赖：

let als
if (typeof window === 'undefined') {
  als = require('asynchronous-local-storage').als
}

理论上仅在非浏览器环境才会加载依赖async_hooks的包，但Webpack仍试图解析这个Node核心模块，我无法理解原因。

项目为Next.js+自定义Express服务器，执行yarn dev时运行正常，但Storybook构建时触发上述错误，错误可追溯至Apollo GraphQL客户端的高阶组件（HOC）中的上述环境判断代码。

Webpack 配置 #

const path = require('path')
const PnpWebpackPlugin = require('pnp-webpack-plugin')
const webpack = require('webpack')

module.exports = async ({ config, mode }) => {
  config.module.rules = [
    ...config.module.rules,
    ...[
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          'file-loader',
        ],
      },
      {
        test: /\.stor[a-z]+\.jsx?$/,
        loaders: [
          {
            loader: require.resolve('@storybook/source-loader'),
            options: { injectDecorator: true },
          },
        ],
        enforce: 'pre',
      },
      {
        test: /\.css$/,
        exclude: [],
        include: [/node_modules/, /src/],
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: false,
            },
          },
        ],
      },
      {
        test: /\.s?css$/,
        exclude: [],
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: false,
            },
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
    ],
  ]

  config.resolve = {
    ...config.resolve,
    ...{
      extensions: [ '.mjs', '.web.js', '.js', '.json', '.web.jsx', '.jsx' ],
      alias: {
        './lodash.min': 'lodash/lodash.js',
        fs: path.join(__dirname, '..', '__mocks__', 'file.js'),
      },
      mainFields: [ 'browser', 'main' ],
    },
  }

  config.plugins.push(PnpWebpackPlugin)
  config.plugins.push(new webpack.DefinePlugin({
    'process.env.IS_BROWSER': JSON.stringify(true)
  }))

  return config
}

Babel 配置 #

{
  "presets": [
    "@babel/preset-react",
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": 10,
          "browsers": ["last 2 versions", "> 1%", "IE 11"]
        },
        "loose": true,
        "modules": "auto",
        "debug": true,
        "useBuiltIns": "entry"
      }
    ],
    "@babel/preset-flow"
  ],
  "retainLines": true,
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-optional-chaining"
  ]
}

我查阅了诸多类似问题但未找到匹配方案，因项目规模和保密协议无法提供复现仓库，恳请协助解决该问题。

内容的提问来源于stack exchange，提问作者Martin Choutka