当我在 Storybook 中渲染组件时，为什么我的导入显示为未定义？答案

【问题标题】：Why is my import showing as undefined when I render my component in Storybook?当我在 Storybook 中渲染组件时，为什么我的导入显示为未定义？
【发布时间】：2021-06-25 21:59:29
【问题描述】：

我怀疑我的 Storybook... 或 Webpack... 的配置可能有问题，因为我看到一个共享组件被导入另一个组件时返回错误，例如：

VM293:90 Uncaught ReferenceError: _somefolder_myimport_js__WEBPACK_IMPORTED_MODULE_35__ is not defined

我已经将a CodeSandbox example 拼凑在一起，将代码暴露在我能做到的最小示例中。

谁能看到这里出了什么问题？我和我的同事已经花了很多时间试图追捕这件事。：/

更新：显然，CodeSandbox 链接已超时，并且我的启动脚本不正确。这应该是固定的。

【问题讨论】：

标签： javascript webpack import storybook

【解决方案1】：

这似乎是初始化 Donut 函数的有趣方式。 initComponentScript 正在创建一个超出 webpack 模块加载器范围的内联脚本。 Webpack 这样做是为了避免污染全局命名空间。您应该能够将您拥有的代码作为模板文字 IIFE 并直接在 initComponentScript 函数中执行它。创建新的脚本标签并附加它需要什么？

这是显示“嘿那里”https://codesandbox.io/s/includestorybook-forked-1yjcj?file=/src/js/components/donut/donut.stories.js

【讨论】：

啊...因为我是 Storybook 的新手，并且遵循团队中其他人建立的模式... :( 非常感谢您找到这个！