storybook [Bug]:无法在preview.tsx或Story中访问环境变量,

vbopmzt1 于 6个月前发布在其他

关注(0)|答案(2)|浏览(47)

描述问题

由于技术原因，我需要将一些环境变量传递给在 preview.tsx 装饰器中配置的提供者。但是，如果我添加一个 console.log(process.env) ,会出现一个空对象。同样的情况也发生在我在任何故事中 console.log 它里面。在 main.ts 文件中，通过 config 控制台输出给我正确的变量。我做错了什么？

重现步骤

添加一个 .env 文件，其中包含两个变量，一个带有 STORYBOOK_ 前缀，另一个没有。
将 preview.ts 重命名为 preview.tsx 并导入 React。
我添加了以下装饰器：

decorators: [
(Story) => {
console.log(process.env); // returns { }
return (

);
},
],

在 main.ts 中，我添加了：

env: (config) => {
console.log(config); // returns { TEST:"test", STORYBOOK_TEST: "storybook test" }
return { ...config };
},

在 Button.stories.ts 中，我添加了一个返回 { } 的 console.log(process.env)(已在 Stackblitz 和本地复现中测试)。

系统信息

无响应

storybook

来源：https://github.com/storybookjs/storybook/issues/24423

2条答案

按热度按时间

xpcnnkqh1#

看起来这可能是@storybook/nextjs处理环境变量时的错误。

赞(0）回复(0）举报 6个月前

vnjpjtjt2#

问题在#15925中得到了很好的解释。问题在于Webpack中的内部DefinePlugin仅用其对应的值替换process.env.<KEY>,而没有修改process.env。这是为了安全原因，其次，我们会尝试减少输出的膨胀。

你现在可以尝试做的是稍微调整一下你的代码，使得const environmentVariables能够单独列出所有的键：

export const decorators: Decorator[] = [
  (Story, context) => {
    useTheme({ themeOverride: context.globals.theme })
    const environmentVariables = {
      key1: process.env.key1,
      key2: process.env.key2,
      ...
    }

    return (
      <div>
        <Providers
          environmentVariables={environmentVariables}
        >
          <Fonts />
          <div>
            <Story />
          </div>
        </Providers>
      </div>
    )
  },
]

理论上，这样应该就可以正常工作了。请告诉我这个解决方法是否有效。

赞(0）回复(0）举报 6个月前

我来回答

storybook [Bug]:无法在preview.tsx或Story中访问环境变量,

描述问题

重现步骤

系统信息

2条答案

相关问题

热门标签

最新问答