storybook [Bug]: esbuild 在 main.ts 和 preview.ts 中不会对导入进行 treeshake (可能导致 ModuleNotFoundError)

8tntrjer 于 4个月前发布在其他

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

描述bug

如果你有一个像这样的桶导出文件 @libs/utils:

// Uses `path` or `fs` or `webpack` or something else that needs node's built-ins
export {someHelperForNode} from "someHelperForNode";

// Doesn't use node's build-ins
export {someHelper} from "someHelper";

然后你在 .storybook/main.ts 中这样使用它：

import {someHelperForNode} from "@libs/utils";

export default {
  // Creates config using that helper
}

在 .storybook/preview.ts 中这样使用它：

import {someHelper} from "@libs/utils";

export default {
  // Creates config using that helper
}

构建将会失败，控制台将包含一堆日志消息，如下所示：

ModuleNotFoundError: Module not found: Error: Can't resolve 'https' in 'C:\...'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
        - install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "https": false }

似乎 someHelperForNode.ts 文件中的一些 node 内置导入泄漏到了 preview.ts 文件中，尽管它不需要它们。

系统环境

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-4790 CPU @ 3.60GHz
  Binaries:
    Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 111.0.5563.65
    Edge: Spartan (44.19041.1266.0), Chromium (111.0.1661.44)
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-rc.4 => 7.0.0-rc.4
    @storybook/addon-interactions: ^7.0.0-rc.4 => 7.0.0-rc.4
    @storybook/addon-links: ^7.0.0-rc.4 => 7.0.0-rc.4
    @storybook/addons: ^7.0.0-rc.4 => 7.0.0-rc.4
    @storybook/blocks: ^7.0.0-rc.4 => 7.0.0-rc.4
    @storybook/nextjs: ^7.0.0-rc.4 => 7.0.0-rc.4
    @storybook/react: ^7.0.0-rc.4 => 7.0.0-rc.4
    @storybook/theming: ^7.0.0-rc.4 => 7.0.0-rc.4

其他上下文

无响应*

storybook

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

2条答案

按热度按时间

c3frrgcw1#

Suffering the same here 😢

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

x6492ojm2#

我正在一个具有非常相似问题的代码库中工作。
结构(部分)如下：

<<root>>
| - .storybook/
|
|-\ - Shared Monorepo Package
|  | - Node-specific font cache util module
|  \ - Other utility modules
|
|-\ - Renderer Monorepo Package
|  |
|  |-\ - Node-specific Rendering Module
|  |  | - A module that uses the node-specific font cache util from Shared
|  |  \ - Server-side PDF-related code
|  |
|  |-\ - Browser/SVG Rendering Module
|  |  | - Several modules that export React elements
|  |  \ - A stories.tsx file that exposes all the React elements in this module
|  |
|  |-\ - index.ts
|  |  | - export * from "{{SVG Rendering Module}}"
|  |  \ - export {default as <node-specific module namespace name>} from "{{the node-specific module}}"

而Browser/SVG Rendering模块的stories.tsx文件在.storybook/main.ts中被选中为

../packages/<renderer package folder name>/src/**/*.stories.@(jsx|tsx)

在stories数组中。
一切都很好，直到node-specific font缓存更新为使用process.env时，所有由Browser/SVG Rendering模块的stories.tsx文件暴露的故事都停止工作。突然间，很明显，无论是Storybook还是Vite Builder本身，都没有进行tree-shaking。
在正常使用情况下，即使主应用程序以开发模式运行，Vite也不会尝试处理node-specific模块。Vite的开发服务器会适当地进行tree-shake。
我知道它会适当地进行tree-shake,是因为Renderer包为定义对象创建了一个多态API,这样我们应用程序的设计部分就可以以与PDF格式生成的对象相同的方式渲染对象。因此，设计师在开发模式下完美运行的事实证明问题出在Storybook的构建管道中。
我意识到这并不是完全相同的问题(GreenTea124只谈论storybook配置文件),但从GreenTea124的描述来看，我有种感觉这两个问题是由同一段代码引起的。
.storybook/preview.ts本应该只执行配置客户端的代码，但当它应该只导入.storybook/preview.ts时，却导入了所有的.storybook。我正在经历的确切问题是故事加载问题。
因此，我认为这个问题应该扩大讨论范围，以讨论storybook的所有动态文件加载中的tree-shaking。
我还想补充一点，我使用的是Linux系统，所以这不是Windows特定的错误，也不是Next-JS特定的错误。我不知道为什么这两个标签会出现在这里，但它们是错误的。

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

我来回答

storybook [Bug]: esbuild 在 main.ts 和 preview.ts 中不会对导入进行 treeshake (可能导致 ModuleNotFoundError)

描述bug

系统环境

其他上下文

2条答案

相关问题

热门标签

最新问答