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

Question

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

VM293:90 Uncaught ReferenceError: _somefolder_myimport_js__WEBPACK_IMPORTED_MODULE_35__ is not defined

我把代码放在一起 a CodeSandbox example

谁能看出这里出了什么问题？我和我的同事们花了很多时间试图找到这个东西。 :/

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

Answer 1

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

这里有显示 'Hey There' https://codesandbox.io/s/includestorybook-forked-1yjcj?file=/src/js/components/donut/donut.stories.js

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

Why is my import showing as undefined when I render my component in Storybook?

javascript

import

webpack

storybook