Cannot read property 'tapAsync' of undefined at ExternalModuleFactoryPlugin.js:30

Question

I am developing a react project, i thought to setup story book. i am getting the following error and i could not up my storybook(5.3.7) with webpack-5-beta-14.

/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:30

normalModuleFactory.hooks.factorize.tapAsync(
                                   ^

TypeError: Cannot read property 'tapAsync' of undefined

I console logged the hooks provided by normalModuleFactory and here is what i got,

{ resolver:
   SyncWaterfallHook {
     _args: [ 'resolver' ],
     taps: [ [Object] ],
     interceptors: [],
     call: [Function: lazyCompileHook],
     promise: [Function: lazyCompileHook],
     callAsync: [Function: lazyCompileHook],
     _x: undefined },
  factory:
   SyncWaterfallHook {
     _args: [ 'factory' ],
     taps: [ [Object] ],
     interceptors: [],
     call: [Function: lazyCompileHook],
     promise: [Function: lazyCompileHook],
     callAsync: [Function: lazyCompileHook],
     _x: undefined },
  beforeResolve:
   AsyncSeriesWaterfallHook {
     _args: [ 'data' ],
     taps: [ [Object] ],
     interceptors: [],
     call: undefined,
     promise: [Function: lazyCompileHook],
     callAsync: [Function: lazyCompileHook],
     _x: undefined },
  afterResolve:
   AsyncSeriesWaterfallHook {
     _args: [ 'data' ],
     taps: [ [Object], [Object] ],
     interceptors: [],
     call: undefined,
     promise: [Function: lazyCompileHook],
     callAsync: [Function: lazyCompileHook],
     _x: undefined },
  createModule:
   SyncBailHook {
     _args: [ 'data' ],
     taps: [],
     interceptors: [],
     call: [Function: lazyCompileHook],
     promise: [Function: lazyCompileHook],
     callAsync: [Function: lazyCompileHook],
     _x: undefined },
  module:
   SyncWaterfallHook {
     _args: [ 'module', 'data' ],
     taps: [],
     interceptors: [],
     call: [Function: lazyCompileHook],
     promise: [Function: lazyCompileHook],
     callAsync: [Function: lazyCompileHook],
     _x: undefined }

normalModuleFactory object does not contain any hook called factorize, it only has factory hook. I go checked the webpack github repo, it has factorize hook. i don't know where it is getting overwritten. any input will help me to get out of this issue.

Answer 1

The problem for me is that, i was using webpack 5 beta, story book was using webpack 4, it is the clause between webpack 4 and 5.

Answer 2

"dependencies": {
  "webpack": "^4.0.0"
}

Fix the webpack version to 4, will solve this problem.

Answer 3

I ran into this same issue and like @Saravanan mentioned above. It was a Webpack issue.

However, when I upgraded to Webpack5 there was a mismatch between the Webpack versions react was using, so I upgraded to React17 as well.

Here is the article I followed that solved the issue.