Does Webpack 4.41.6 polyfill for the async_hooks Node core module?

[choutkamartin]

Hi, I have a little problem with running Storybook in one of older projects. When I run Storybook with custom Webpack config, I run into an error:

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'

This error means, that async_hooks is not recognized. Async_hooks is a part of Node.js, which means I can't access it in a browser. However, I thought Webpack polyfills these modules. What I did was this:

config.target = "node";

But this means that the bundled code will be optimalized for Node.js and not a browser app. That's why the error is gone, and I can now run Storybook but stories from Storybook won't load due to an error in a browsers console:

Uncaught ReferenceError: exports is not defined

What I'm doing right now in the application is basically this:

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

Which should require this package, that depends on the async_hooks module only, if the environment is not a browser. However, somehow, Webpack still wants to load this core Node module, and I don't understand why. This is the Webpack config file:

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
}

And just for case Babel config file:

{
  "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"
  ]
}

I'm really having a hard time to find a way how to make this work. I looked at a lot of similar quetions but none have the exact same problem as I do.

I can't replicate the repository however, due to the project size and NDA.

Thanks

[alexander-akait]

You can exclude this file using https://webpack.js.org/configuration/module/#modulenoparse, so webpack will not handle this

[choutkamartin]

@alexander-akait Thanks, forgot there is option like this. I have few questions though, can I use noParse on node_modules?

config.module = {
  noParse: /node_modules\/asynchronous-local-storage/
}

If I can, why setting the noParse option results in this error? Setting the noParse to anything results in the error below.

ERROR in ./.storybook/config.js 27:2
Module parse failed: Unexpected token (27:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const ThemedImage = createComponent('Image', 'img', Element)
| const ImgBoxComponent = ({ htmlWidth, htmlHeight, ...props }) => (
>   <Element as="div" width={htmlWidth} height={htmlHeight} {...props} />
| )
| 
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true main[2]

Below is the entire config file

{
  mode: 'development',
  bail: false,
  devtool: '#cheap-module-source-map',
  entry: [
    'C:\\Users\\Martin\\Documents\\SiteOne\\censored\\node_modules\\@storybook\\core\\dist\\server\\common\\polyfills.js',
    'C:\\Users\\Martin\\Documents\\SiteOne\\airbank-cz-frontend\\node_modules\\@storybook\\core\\dist\\server\\preview\\globals.js',
    'C:\\Users\\Martin\\Documents\\SiteOne\\airbank-cz-frontend\\.storybook\\config.js',
    'C:\\Users\\Martin\\Documents\\SiteOne\\airbank-cz-frontend\\node_modules\\webpack-hot-middleware\\client.js?reload=true&quiet=true'
  ],
  output: {
    path: 'C:\\Users\\Martin\\Documents\\SiteOne\\airbank-cz-frontend\\node_modules\\@storybook\\core\\dist\\public',
    filename: '[name].[hash].bundle.js',
    publicPath: ''
  },
  plugins: [
    HtmlWebpackPlugin {
      options: [Object],
      childCompilerHash: undefined,
      childCompilationOutputName: undefined,
      assetJson: undefined,
      hash: undefined,
      version: 4
    },
    DefinePlugin { definitions: [Object] },
    WatchMissingNodeModulesPlugin {
      nodeModulesPath: 'C:\\Users\\Martin\\Documents\\SiteOne\\airbank-cz-frontend\\node_modules'
    },
    HotModuleReplacementPlugin {
      options: {},
      multiStep: undefined,
      fullBuildTimeout: 200,
      requestTimeout: 10000
    },
    CaseSensitivePathsPlugin {
      options: {},
      logger: [Object],
      pathCache: {},
      fsOperations: 0,
      primed: false
    },
    ProgressPlugin {
      profile: false,
      handler: undefined,
      modulesCount: 500,
      showEntries: false,
      showModules: true,
      showActiveModules: true
    },
    DefinePlugin { definitions: {} },
    NormalModuleReplacementPlugin {
      resourceRegExp: /core-js/,
      newResource: [Function]
    },
    {
      apply: [Function: nothing],
      makePlugin: [Function],
      moduleLoader: [Function],
      topLevelLoader: [Object],
      bind: [Function],
      tsLoaderOptions: [Function],
      forkTsCheckerOptions: [Function]
    },
    DefinePlugin { definitions: [Object] }
  ],
  module: { noParse: /node_modules\/asynchronous-local-storage/ },
  resolve: {
    extensions: [ '.mjs', '.web.js', '.js', '.json', '.web.jsx', '.jsx' ],
    modules: [ 'node_modules' ],
    alias: {
      './lodash.min': 'lodash/lodash.js',
      fs: 'C:\\Users\\Martin\\Documents\\SiteOne\\airbank-cz-frontend\\__mocks__\\file.js'
    },
    mainFields: [ 'browser', 'main' ]
  },
  optimization: {
    splitChunks: { chunks: 'all' },
    runtimeChunk: true,
    minimizer: [ [TerserPlugin] ]
  },
  performance: { hints: false }
}

The point I'm trying to make is, that even though I use noParse option in a point, where the Storybook and Webpack worked fine, it fails too.

[choutkamartin]

In the end I actually used IgnorePlugin, which worked.

config.plugins.push(
  new IgnorePlugin({
    resourceRegExp: /async_hooks/,
  }),
)