Error `tapAsync` of undefined when starting storybook

[imdongchen]

Hi,

I came across the following error when starting storybook. The error happens in both npm start and npm run build. Is there anything I missed?

Steps to reproduce:

1. Clone the repo
2. Check out finalVersion branch
3. npm install in DesignSystem folder.
4. npm start

Error:

 TypeError: Cannot read property 'createSnapshot' of undefined
    at Promise (/Users/dchen1/code/playground/storybook-mf-plugin/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/html-webpack-plugin/lib/webpack5/file-watcher-api.js:13:36)
    at new Promise (<anonymous>)
    at Object.createSnapshot (/Users/dchen1/code/playground/storybook-mf-plugin/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/html-webpack-plugin/lib/webpack5/file-watcher-api.js:12:10)
    at compiledEntriesPromise.then (/Users/dchen1/code/playground/storybook-mf-plugin/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:219:35)
(node:72901) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)
(node:72901) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
/Users/dchen1/code/playground/storybook-mf-plugin/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:29
                normalModuleFactory.hooks.factorize.tapAsync(
                                                    ^

TypeError: Cannot read property 'tapAsync' of undefined
    at ExternalModuleFactoryPlugin.apply (/Users/dchen1/code/playground/storybook-mf-plugin/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:29:39)
    at compiler.hooks.compile.tap (/Users/dchen1/code/playground/storybook-mf-plugin/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/webpack/lib/ExternalsPlugin.js:25:63)
    at SyncHook.eval [as call] (eval at create (/Users/dchen1/code/playground/storybook-mf-plugin/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (/Users/dchen1/code/playground/storybook-mf-plugin/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.beforeCompile.callAsync.err (/Users/dchen1/code/playground/storybook-mf-plugin/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:665:23)
    at _err0 (eval at create (/Users/dchen1/code/playground/storybook-mf-plugin/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
    at compiler.inputFileSystem.readFile (/Users/dchen1/code/playground/storybook-mf-plugin/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/@storybook/core/node_modules/webpack/lib/DllReferencePlugin.js:72:15)
    at process.nextTick (/Users/dchen1/code/playground/storybook-mf-plugin/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15)
    at process._tickCallback (internal/process/next_tick.js:61:11)

[ScriptedAlchemy]

looks like an old version of storybook / webpack is getting resolved somewhere. nuke lockfiles and see if it still works.

If this is a monorepo, nohoist webpack has solved many of these issues

[jeremiahdir]

Hello, after reproducing your error and using yarn (1.22.4) and nohoisting webpack it resolved this issue. Maybe add this as a notice/potential FAQ for this project? I have seen some other users run into this issue as well.

To reproduce this fix:

1. Append "workspaces": { "nohoist": [ "webpack" ] } to both DesignSystem and App's package.json's
2. delete both yarn.lock files
3. yarn build the Design System
4. yarn serve the Design System
5. yarn start the App

[samhatoum]

Thank you @jeremiahdir . Want to make that a PR for us and have your name on here? :)

[ScriptedAlchemy]

yep that sounds about right @jeremiahdir

[jeremiahdir]

Thank you @jeremiahdir . Want to make that a PR for us and have your name on here? :)

Doing now

[jeremiahdir]

Hmm, had it working but now when I try to yarn build I get this compilation error. Tried with and without the nohoist option.

UPDATE: updating to beta17 of webpack fixes this, however then the consuming app has issues with consuming the federated components, see below. I will open an issue with the plugin itself.

Issue with consuming app after upgrading to beta17 version of webpack

Uncaught (in promise) Error: Module "./components/Title" does not exist in container.
while loading "./components/Title" from webpack/container/reference/xolvio_ui
    at container-entry:53
    at async Promise.all (:9000/index 1)
    at async Promise.all (:9000/index 1)

issue with both consuming and producing app when using beta16 version

Starting type checking service...
0% compiling(node:35361) UnhandledPromiseRejectionWarning: TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/Users/jdir/Projects/Examples/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:116:10)
    at compiler.hooks.compilation.tap.compilation (/Users/jdir/Projects/Examples/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/terser-webpack-plugin/dist/index.js:419:67)
    at SyncHook.eval [as call] (eval at create (/Users/jdir/Projects/Examples/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:91:1)
    at SyncHook.lazyCompileHook (/Users/jdir/Projects/Examples/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/Users/jdir/Projects/Examples/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:631:26)
    at hooks.beforeCompile.callAsync.err (/Users/jdir/Projects/Examples/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:667:29)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/jdir/Projects/Examples/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/jdir/Projects/Examples/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/Users/jdir/Projects/Examples/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:662:28)
    at readRecords.err (/Users/jdir/Projects/Examples/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:321:11)
    at Compiler.readRecords (/Users/jdir/Projects/Examples/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:529:11)
    at hooks.run.callAsync.err (/Users/jdir/Projects/Examples/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:318:10)
    at _err0 (eval at create (/Users/jdir/Projects/Examples/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
    at run (/Users/jdir/Projects/Examples/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/fork-ts-checker-webpack-plugin/lib/index.js:204:13)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/jdir/Projects/Examples/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/jdir/Projects/Examples/webpack-federation-storybook-design-systems-demo/DesignSystem/node_modules/tapable/lib/Hook.js:154:20)
(node:35361) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:35361) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

[jeremiahdir]

Error above mentioned and fixed in issue above^

Fix for this issue submitted in this PR: https://github.com/xolvio/webpack-federation-storybook-design-systems-demo/pull/9

@samhatoum