Storybook 7.4 - doc theme throws error from preview.ts

[shohrab-uddin]

I recently upgraded storybook from 6.5 to 7.4 in one of my angular based projects. I am getting the following error when I open a documentation page in storybook. I applied the custom theme inside the docs object in preview.ts class.

I followed the theming guidelines from here: https://storybook.js.org/docs/angular/configure/theming

Here is my theme class (docTheme.js):

import { create } from '@storybook/theming/create';

export default create({
  base: 'light',
  fontBase: '"my custom font", "Helvetica Neue", "sans-serif"'
});

Here is my manager.js class:

import { addons } from '@storybook/manager-api';
import docTheme from './docTheme';

addons.setConfig({
  theme: docTheme,
});

Note: docTheme.js works fine from this manager.js class

And here is my preview.ts class:

import {componentWrapperDecorator} from '@storybook/angular';
import * as docTheme from './docTheme';
import type { Preview } from "@storybook/angular";
import { themes } from '@storybook/theming';

const preview: Preview = {
  decorators: [componentWrapperDecorator((story) => `<div class='story-container'>${story}</div>`)],
  parameters: {   
    controls: { expanded: true },
    docs: {
      story: {
        inline: true,
      },
      theme: docTheme, // ****this causes the error 
    },
    },
};

export default preview;