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.

score 19 · Answer 1 · answered May 04 '20 at 05:17

19

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.

answered May 04 '20 at 05:17

Saravanan Ramupillai

739
2
6
17

4

give yourself the answer ! – Ben G Oct 20 '20 at 00:08
2

Can you please share how you changed your configuration? – Olle Härstedt Dec 16 '20 at 23:32

score 3 · Answer 2 · answered Jan 27 '21 at 08:18

3

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

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

answered Jan 27 '21 at 08:18

kidfruit

364
1
2
9

score 1 · Answer 3 · edited Dec 06 '21 at 07:22

1

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.

edited Dec 06 '21 at 07:22

YakovL

7,557
12
62
102

answered Jun 27 '21 at 15:12

Nic

31
4

score 0 · Answer 4 · answered Mar 31 '22 at 08:06

For me it was a problem with the outdated version of html-webpack-plugin (you can check the version in the package.json file). So that I reinstalled it:

npm uninstall html-webpack-plugin

and then

npm --save html-webpack-plugin

This way it will install the latest verion available at that moment.

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

4 Answers4