CODEWITHSUNDEEP
javascriptnode.jsreactjswebpackstorybook
Saravanan Ramupillai
Saravanan Ramupillai

Reputation: 757

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

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.

Upvotes: 14

Views: 25618

Answers (4)

Adi G.
Adi G.

Reputation: 21

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.

Upvotes: 0

Nic
Nic

Reputation: 41

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.

Upvotes: 1

kidfruit
kidfruit

Reputation: 394

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

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

Upvotes: 5

Saravanan Ramupillai
Saravanan Ramupillai

Reputation: 757

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.

Upvotes: 20

Related Questions