Webpack 5 upgrade - ts-loader module build fails on storybook run

Describe the bug Hi there, after upgrading webpack version to 5, running build-storybook or start-storybook is causing the ts-loader module build to fail. TypeError: Cannot read property ‘tap’ of undefined

WARN ./src/components/anchor.stories.tsx WARN Module build failed (from ./node_modules/ts-loader/index.js): WARN TypeError: Cannot read property 'tap' of undefined WARN at makeAssetsCallback (/Users/marjank/code/apps-rendering/node_modules/ts-loader/dist/instances.js:218:50) WARN at addAssetHooks (/Users/marjank/code/apps-rendering/node_modules/ts-loader/dist/instances.js:224:9) WARN at Object.initializeInstance (/Users/marjank/code/apps-rendering/node_modules/ts-loader/dist/instances.js:288:9) WARN at successLoader (/Users/marjank/code/apps-rendering/node_modules/ts-loader/dist/index.js:26:17) WARN at Object.loader (/Users/marjank/code/apps-rendering/node_modules/ts-loader/dist/index.js:23:5) WARN @ \.)(?=.)[^/]*?\.stories\.(js|mdx|ts|tsx))$ (./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|mdx|ts|tsx))$) ./components/anchor.stories.tsx WARN @ ./.storybook/generated-stories-entry.js WARN @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js

To Reproduce Steps to reproduce the behavior: 1- Go to the PR for the webpack version change https://github.com/guardian/apps-rendering/pull/1215 2- npm i 3- npm run storybook or npm run build-storybook

Expected behavior It is supposed to build the ts-loader module successfully

System “@storybook/addon-essentials”: “^6.1.21”, “@storybook/addon-knobs”: “^6.1.21”, “@storybook/addon-storyshots”: “^6.1.21”, “@storybook/react”: “^6.1.21”, “@storybook/storybook-deployer”: “^2.8.7” “webpack”: “^5.24.2”, “webpack-cli”: “^4.5.0”, “webpack-dev-server”: “^3.11.2”, “html-webpack-plugin”: “^5.2.0”, “ts-loader”: “^8.0.17”,

Node:: v12.20.0 NPM: 6.14.8

Additional context Add any other context about the problem here.

[JamieB-gu]

We managed to get this merged in about a week ago (PR here in case it helps anyone in future: https://github.com/guardian/apps-rendering/pull/1245) and it’s been fine so far, so we’re happy to close this issue now. Thanks for all your help @shilman!

Hi @webb04! Small world 🌎

[JamieB-gu]

Thanks @shilman! Switching to that configuration seems to do the trick (as seen in the PR that GitHub has linked above ^).

I did have to tweak how terser-webpack-plugin was installed, which I believe is due to the issue discussed in #13893.

We’ll do some testing to see if we can spot any issues caused by jumping to the beta.