Cannot read property 'tap' of undefined

[VincentLanglet]

I'm using the following library:

• react-pdf
• storybook
• webpack-encore

I recently tried to upgrade webpack-encore to version 1.0, with the wepack 5 support.

But some of my dependencies are still using webpack 4 (like storybook storybookjs/storybook#14012 (comment)), so I have 2 webpack versions in my node_modules.

If I use

"resolutions": {
    "webpack": "^5.23.0"
},

My build works fine ; except the fact that storybook doesn't work (cf issue).

But if I don't use it, I get

 error  in ./node_modules/react-pdf/dist/esm/pdf.worker.entry.js

Syntax Error: TypeError: Cannot read property 'tap' of undefined

This is because I'm following https://github.com/wojtekmaj/react-pdf#enable-pdfjs-worker, with the code

Encore.addAliases({
    'react-pdf': path.resolve(__dirname, 'node_modules/react-pdf/dist/esm/entry.webpack'),
});

This code was working fine with webpack 4, and is working too if I use resolution.

Why it wouldn't work without the resolution. Would it be possible that webpack-encore is messing up with the webpack version to use ? (Like the issue I got: #727)

[stof]

Well, if you have both webpack 4 and webpack 5 in your dependency tree, which one gets hoisted where might be unreliable. And this can lead to weird things when dealing with webpack loaders that get registered in your Encore-based webpack config (which should be running with webpack 5) if the loaded version is referencing a webpack 4 install.

[weaverryan]

Yea, so if I understand things correctly, WITH the resolution, everything works fine, except for Storybook, because it doesn't support Webpack 5 (and sorry, I don't know storybook at all). I'd say that Stof is probably correct: Encore is really meant to "take over" and require and execute Webpack directly. If you have multiple webpacks in there, probably Encore is running Webpack but then react-pdf gets Webpack 4... just because "which one gets hoisted" isn't really guaranteed. I think the solution is to have only Webpack 5 required by your project (i.e. get Storybook to work on Webpack 5).

Sorry I can't offer a silver bullet - but I think it's that simple :). It's not quite the same situation as #727, because, while it may make sense for Encore to use file-loader at one version and YOUR app to use it at a different version, it probably doesn't make sense for 2 versions of Webpack to be used at the same time.

Cheers!