StoryBook无法读取在单独文件中定义的常量。

huangapple go评论115阅读模式
英文:

StoryBook not reading a constant defined in a separate file

问题

我在我的React项目中使用的是storybook 7.2.1版本,我遇到了一个错误:"Cannot read properties of undefined (reading 'GlobalVariables')"

GlobalVariables是我在名为global.variables.ts的文件中定义的常量,该文件位于'src/constant/'目录下。

'constant'目录包括一个index.ts文件,该文件导出了我在'src/constant/'目录下所有文件中定义的所有常量。

我尝试将以下内容添加到storybook的main.js配置文件中:

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

export default config;
英文:

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;

答案1

得分: 1

staticDirs 用于提供静态文件(如图片、字体等)的服务。

如果您有一组需要从多个地方访问的变量,可以将它们保存为 env 变量:

// 在您的 .storybook/main.ts 中

const config: StorybookConfig = {
  framework: 'your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  env: (config) => ({
    ...config,
    EXAMPLE_VAR: '在 Storybook 中配置的环境变量',
  }),
};

然后在您的故事中可以这样访问它们:

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

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,
  },
};

huangapple
  • 本文由 发表于 2023年8月9日 17:46:17
  • 转载请务必保留本文链接:https://go.coder-hub.com/76866508.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定