Compilation fails with error TS2305: Module '"parse5"' has no exported member 'ElementLocation'.

I followed this tutorial to install Storybook into my new NX monorepo with an Angular app and libraries:

https://nx.dev/recipes/storybook/one-storybook-for-all

Up to that point everything compiled and the Storybook page opened saying I have no stories. I then created a simple button component with a few inputs and outputs and ran “nx generate @nrwl/angular:stories” for the component. So far so good, no errors. However, when now trying to run Storybook with “nx storybook stories” (“stories” being the name of my Storybook host library as described in the tutorial), I get a huge list of errors and the compilation fails.

For example:

Error: node_modules/@types/jsdom/base.d.ts:5:10 - error TS2305: Module ‘“parse5”’ has no exported member ‘ElementLocation’.

Error: node_modules/@types/webpack/index.d.ts:32:3 - error TS2305: Module ‘“tapable”’ has no exported member ‘Tapable’.

Error: node_modules/@types/webpack/index.d.ts:1083:28 - error TS2707: Generic type ‘AsyncSeriesWaterfallHook<T, AdditionalOptions>’ requires between 1 and 2 type arguments.

Etc.

What am I doing wrong and is the tutorial missing something.

Relevant (?) library versions (in dev dependencies):

“@nrwl/angular”: “14.8.4”, “@nrwl/cli”: “14.8.4”, “@storybook/addon-essentials”: “~6.5.9”, “@storybook/angular”: “~6.5.9”, “@storybook/builder-webpack5”: “~6.5.9”, “@storybook/core-server”: “~6.5.9”, “@storybook/manager-webpack5”: “~6.5.9”, “@types/node”: “16.11.7”, “ts-node”: “10.9.1”, “typescript”: “~4.8.2”, “webpack”: “^5.64.0”, “@nrwl/storybook”: “^15.0.13”

I have attached some relevant codes (mostly based on the tutorial).

const rootMain = require('../../../.storybook/main');

module.exports = {
  ...rootMain,

  core: { ...rootMain.core, builder: 'webpack5' },

  stories: [
    ...rootMain.stories,
    '../../**/*.stories.mdx',
    '../../**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [...rootMain.addons],
  webpackFinal: async (config, { configType }) => {
    // apply any global webpack configs that might have been specified in .storybook/main.js
    if (rootMain.webpackFinal) {
      config = await rootMain.webpackFinal(config, { configType });
    }

    // add your own webpack tweaks if needed

    return config;
  },
};

libs/stories/.storybook/main.js

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "emitDecoratorMetadata": true
  },

  "exclude": ["../**/*.spec.ts"],
  "include": [
    "../../**/*.stories.ts",
    "../../**/*.stories.js",
    "../../**/*.stories.jsx",
    "../../**/*.stories.tsx",
    "../../**/*.stories.mdx",
    "*.js"
  ]
}

libs/stories/.storybook/tsconfig.json

import { moduleMetadata, Story, Meta } from "@storybook/angular";
import { ButtonComponent } from "./button.component";

export default {
  title: "ButtonComponent",
  component: ButtonComponent,
  decorators: [
    moduleMetadata({
      imports: []
    })
  ]
} as Meta<ButtonComponent>;

const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
  props: args
});

export const Primary = Template.bind({});
Primary.args = {
  label: "",
  icon: "",
  disabled: false
};

button.component.stories.ts