Importing anything from '@storybook/angular' cause error "Interface 'NodeRequire' cannot simultaneously extend types 'Require' and 'WebpackRequire'"

I configured storybook in Angular app and tried running following first story using storybook demo components.

import { Button } from '@storybook/angular/demo';

export default { title: 'My Button' };

export const withText = () => ({
  component: Button,
  props: {
    text: 'Hello Button',
  },
});

export const withEmoji = () => ({
  component: Button,
  props: {
    text: '   ',
  },
});

This above example works perfectly fine. Now when I import anything from @storybook/angular like this

import { moduleMetadata } from '@storybook/angular';
// OR
import { storiesOf } from '@storybook/angular';

Build breaks with following errors

ERROR in node_modules/@types/webpack-env/index.d.ts(281,11):
TS2320: Interface 'NodeRequire' cannot simultaneously extend types 'Require' and 'WebpackRequire'.
  Named property 'context' of types 'Require' and 'WebpackRequire' are not identical.

ERROR in node_modules/@types/webpack-env/index.d.ts(281,11):
TS2320: Interface 'NodeRequire' cannot simultaneously extend types 'Require' and 'WebpackRequire'.
  Named property 'ensure' of types 'Require' and 'WebpackRequire' are not identical.

ERROR in node_modules/@types/webpack-env/index.d.ts(354,11):
TS2320: Interface 'NodeModule' cannot simultaneously extend types 'Module' and 'WebpackModule'.
  Named property 'hot' of types 'Module' and 'WebpackModule' are not identical.

I tried multiple solutions but none of them worked.

Update: I was able temporarily fix it to move forward by modifying the interfaces in node_modules/@types/webpack-env/index.d.ts

// this line
interface NodeModule extends NodeJS.Module {}
// replaced with
interface NodeModule {}

Similarly

interface NodeRequire extends NodeJS.Require {}
// replaced with
interface NodeRequire {}

and finally

interface Module extends __WebpackModuleApi.Module {}
// replaced with
interface Module {}