英文:
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,
},
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论