storybook [Bug]: 在初始化之前访问'kt'注解 翻译结果:错误:在初始化之前访问'kt'注解

kx5bkwkv  于 3个月前  发布在  其他
关注(0)|答案(7)|浏览(42)

描述bug

在从v6迁移到v7后,有时在左侧面板中展开新部分时会出现错误:

按下F5键重新加载故事,一切都正常。在左侧面板中展开新部分,有时可以正常工作,有时仍然出现相同的错误...
这种情况只发生在生产模式下,使用storybook构建。开发模式下没有问题。

重现步骤

$ storybook build
@storybook/cli v7.0.0-beta.59

info => Cleaning outputDir: \storybook-static
info => Loading presets
info => Building manager..
info => Manager built (393 ms)
info => Compiling preview..
info => Copying static files: C:\Users\MattiasJ\git\xxx-ui-components\node_modules\storybook\node_modules\@storybook\manager\static at C:\Users\MattiasJ\git\xxx-ui-components\storybook-static\sb-common-assets
info => Using implicit CSS loaders
info => Using default Webpack5 setup
info => Copying static files: C:\Users\MattiasJ\git\xxx-ui-components\.storybook\public at C:\Users\MattiasJ\git\xxx-ui-components\storybook-static\
info => Preview built (14 s)
info => Output directory: C:\Users\MattiasJ\git\xxx-ui-components\storybook-static

启动本地Web服务器并导航到localhost。
导航到左侧面板中的各个部分以展开故事列表。似乎列表中的第一个故事(在展开时自动选择)没有被加载!?

系统信息

Environment Info:

  System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 Intel(R) Core(TM) i9-10885H CPU @ 2.40GHz
  Binaries:
    Node: 18.14.1 - ~\.nvm\versions\node\v18.14.1\bin\node.EXE
    Yarn: 1.22.19 - ~\git\node_modules\.bin\yarn.CMD
    npm: 9.3.1 - ~\.nvm\versions\node\v18.14.1\bin\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (110.0.1587.56)
  npmPackages:
    @storybook/addon-actions: 7.0.0-beta.55 => 7.0.0-beta.55
    @storybook/addon-controls: 7.0.0-beta.55 => 7.0.0-beta.55
    @storybook/addons: 7.0.0-beta.55 => 7.0.0-beta.55
    @storybook/cli: 7.0.0-beta.55 => 7.0.0-beta.55
    @storybook/core: 6.5.16 => 6.5.16
    @storybook/storybook-deployer: ^2.8.16 => 2.8.16
    @storybook/theming: 7.0.0-beta.55 => 7.0.0-beta.55
    @storybook/web-components: 7.0.0-beta.55 => 7.0.0-beta.55
    @storybook/web-components-webpack5: ^7.0.0-beta.55 => 7.0.0-beta.59

其他上下文信息

module.exports = {
    staticDirs: ['./public'],
    stories: ['../stories/start.stories.@(js|jsx|ts|tsx)', '../stories/*/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: [
        '@storybook/addon-controls',
        {
            name: 'storybook-addon-turbo-build',
            options: {
                // Please refer below tables for available options
                optimizationLevel: 3,
            },
        },
    ],
    core: {
        builder: 'webpack5',
        disableTelemetry: true,
    },
    framework: {
        name: '@storybook/web-components-webpack5',
        options: {},
    },
};
cczfrluj

cczfrluj1#

你有一个可以分享的复制品仓库吗?如果没有,你能创建一个吗?请查看 how to create a repro 。非常感谢!🙏
另外,当你移除 storybook-addon-turbo-build 时,问题是否会消失?

i2byvkas

i2byvkas2#

我们使用turbo-build来传递构建步骤。否则,压缩器会破坏内联css。例如:

10% building 0/1 entries 1/2 dependencies 0/1 modulesinfo => Copying static files: C:\Users\MattiasJ\git\xxx-ui-components\.storybook\public at C:\Users\MattiasJ\git\xxx-ui-components\storybook-static\
ERR! => Failed to build the preview
ERR! Module build failed (from ./node_modules/babel-loader/lib/index.js):
ERR! SyntaxError: C:\Users\MattiasJ\git\xxx-ui-components\packages\xxx-ui-calendar\dist\calendarStyle.js: html-minifier-terser deleted something major, cannot proceed.
ERR!   29 | function generateDateStyles(tagName) {
ERR!   30 |     const { root, child, is } = cssSelector(`${tagName}-date`);
ERR! > 31 |     return css `
ERR!      |            ^
ERR!   32 |         ${root} {

不确定如何解决这个问题,但我会尝试一下...

hk8txs48

hk8txs483#

现在没有使用storybook-addon-turbo-build进行构建。尽管如此,仍然存在相同的问题。

Cannot access 'Ti' before initialization
ReferenceError: Cannot access 'Ti' before initialization
    at Module.default (http://127.0.0.1:8887/components-composition-composition-stories.3320759a.iframe.bundle.js:5:6868)
    at processCSFFile (http://127.0.0.1:8887/sb-preview/runtime.mjs:34:77)

(现在使用的是7.0.0-beta.61版本)

aor9mmx1

aor9mmx14#

抱歉,问题已经解决了!我当时运行了一个指向旧输出文件夹的本地Web服务器。我可以确认storybook-addon-turbo-build是问题所在。关闭它可以解决问题,打开它又会再次出现问题!

ws51t4hk

ws51t4hk5#

你好!@shilman@MattiasJa,我在为autodocs构建故事书后遇到了相同的问题,你能看一下吗?如果有任何解决方案,请告诉我。#26944
提前感谢!

zaq34kh6

zaq34kh66#

你好!@shilman@MattiasJa,我在为autodocs构建故事书后遇到了相同的问题,你能看一下吗?如果有解决方案,请告诉我#26944
提前感谢
你好@hiren3897,我们通过移除turbo-build解决了这个问题。
我看到你使用了vite-builder,所以你的问题可能出在这个依赖上!?

elcex8rz

elcex8rz7#

感谢@MattiasJa的回复。

是的,我想问题出在依赖上,我尝试移除所有插件,除了用于构建自动文档的addon-docs插件。这很奇怪,因为当我们在本地运行storybook时,一切都能正常渲染完整的文档,但是当我们使用vite-builder构建时,我们会得到一个错误,提示某些内容在使用init之前无法使用!

我在deps文件夹中,尝试查看它抛出错误的地方。

theme: React2.useContext(ThemeContext)},ele=props.children(content);return hasRendered=!0,React2.createElement(React2.Fragment,null,React2.createElement(Insertion3,{cache,serializedArr}),ele)});process.env.NODE_ENV!=="production"&&(ClassNames.displayName="EmotionClassNames");**process.env.NODE_ENV!=="production"**&&(isBrowser5=typeof document<"u",isTestEnv=typeof jest<"u"||typeof vi<"u",isBrowser5&&!isTestEnv&&(globalContext=typeof globalThis<"u"?globalThis:isBrowser5?window:global,globalKey="_*EMOTION_REACT*"
基本上,从'**process.env.NODE_ENV!=="production"**&&(isBrowser5=typeof document<"u" It不能在使用初始化之前使用,正如所指出的。

我正在努力弄清楚什么、在哪里、为什么在使用初始化之前不应该使用:(

相关问题