StoryBook not reading a constant defined in a separate file

I'm using storybook 7.2.1 in my react project and I am getting the error "Cannot read properties of undefined (reading 'GlobalVariables')";

GlobalVariables is a constant that I defined in file named global.variables.ts, this file in located under 'src/constant/'.

The 'constant' directory includes an index.ts file which exports all the constants that I defined in all the files under 'src/constant/'

I tried adding this to the main.js config file of storybook:

const config: StorybookConfig = {
...
staticDirs: ['..\\public', '../src/config/constant'],
...
}
export default config;

staticDirs is used to serve static files like images, fonts,..etc.

if you have a set of variables that needs to be accessed from multiple places you can save them as env variables:

// in your .storybook/main.ts
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  env: (config) => ({
    ...config,
    EXAMPLE_VAR: 'An environment variable configured in Storybook',
  }),
};

then in your stories you can access them like:

export const Default: Story = {
  args: {
    exampleProp: process.env.EXAMPLE_VAR,
  },
};