[Bug]: annot access 'kt' before initialization

[MattiasJa]

Describe the bug

Migrated to v7 and sometimes get errors when expanding a new section in the left pane :

hitting F5 to reload story and everything is fine. Expand a new section in the left pane, sometime ok and sometime same error...

This only occur production mode, using storybook build. Dev mode - no problem.

To Reproduce

$ 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

Start local webserver and navigate to localhost.
Navigate sections in left pane to expand list of stories. Seems like first story in the list (that gets auto selected on expand) is not loaded!?

System

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

Additional context

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: {},
    },
};

[shilman]

Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro. Thank you! 🙏

Also, does the problem go away when you remove storybook-addon-turbo-build?

[MattiasJa]

@shilman We use turbo-build to pass the build step. Else the minifier wreck the inline css. For example :

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} {

Not sure how to get around this but ill give it a try...

[MattiasJa]

Now building without storybook-addon-turbo-build. Same issue though.

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)

(Now using 7.0.0-beta.61)

[MattiasJa]

Sorry, problem is now gone! I was running local webserver pointing to an older output folder. I can confirm that storybook-addon-turbo-build is the problem. Turning it off make problem go away. Turning it on make problem appear again!

[hiren3897]

Hi!! @shilman @MattiasJa, I am facing the same issue after building the storybook for autodocs, can you please have a look and lemme know if you have any solution #26944

Thanks in advance

[MattiasJa]

Hi!! @shilman @MattiasJa, I am facing the same issue after building the storybook for autodocs, can you please have a look and lemme know if you have any solution #26944

Thanks in advance

Hi @hiren3897, for us the issue resolved after removing turbo-build.
I see that you use vite-builder, so your problem is probably in that dep!?

[hiren3897]

Thanks for the response @MattiasJa.

Yes, I guess the problem is in deps, I tried to remove all plugin except addon-docs for building auto-docs.

It is strange because when we run the storybook locally, everything is rendered with complete documentation, but when we build with vite-builder, we get an error stating that something cannot be used before init!!!

I was in node_modules inside deps and tried to see where it throws the error

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"

Basically, from 'process.env.NODE_ENV!=="production"&&(isBrowser5=typeof document<"u" It cannot be used prior to initialization, as stated.

I am trying to figure out what, where, why should not be used before initialization:(