Import issues with styled-components unstable build and imports

[crtl]

Describe the bug
Its not a specific error but depending on how I manage my imports storybook seems to have problems loading stories and resolving imports.
Often times my I get errors telling me I try to call styled() with undefined which cannot be true because in my project every styled call directly follows constant definition.

For example the following component and story currently creates issues:

component:

// src/shared/ui/typography/heading.tsx

import styled from "styled-components";

// Core only exports plain typescript files and also does not export anything outside of its directory so its not the issue.
import {sizeToPixel} from "core";

export type HeadingProps = {
    level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
    children: string;
};

export const Heading = styled.h1.attrs((props: HeadingProps) => ({
    as: props.level,
}))<HeadingProps>`
    font-family: inherit;
    font-size: ${props => sizeToPixel(props.level, ["h1", "h2", "h3", "h4", "h5", "h6"], [3.2, 2.8, 2.2, 1.8, 1.4, 1.2], "h1") + "em"};
`;

Heading.displayName = "Heading";


export const Title = styled(Heading).attrs({level: "h1"})``;

Title.displayName = "Title";


export const Subtitle = styled(Heading).attrs({level: "h2"})``;

Subtitle.displayName = "Subtitle";

And my story:

import {Meta, Story} from "@storybook/react";
import React from "react";
// This is the actual heading.tsx file I have also tried shared/ui which creates other problems
import {Heading, HeadingProps} from "shared/ui/typography/heading";

export default {
    title: 'Shared/Typography/Heading',
    component: Heading,
} as Meta;



const Template: Story<HeadingProps> = (args) => <Heading {...args} />;

export const Heading1 = Template.bind({});
Heading1.args = {
    level: "h1",
    children: "Lorem ipsum dolor sit amet",
};

Storybook is not able to display this story the console prints the following warning:

Unexpected error while loading ./stories/shared/Heading.stories.tsx: ReferenceError: Cannot access 'Heading' before initialization

I am using the CRA typescript template with styled-components.
I dont use any default exports in my files.
I have also additionally used madge to check for any circular dependencies but it does not show any.

If I use my components inside my app it just works normally.
So I think there is an issue with storybooks build system.

To Reproduce
I dont know

System

Environment Info:

  System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-9700F CPU @ 3.00GHz
  Binaries:
    Node: 12.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 91.0.4472.77
    Edge: Spartan (44.19041.964.0), Chromium (91.0.864.37)
  npmPackages:
    @storybook/addon-actions: ^6.2.9 => 6.2.9
    @storybook/addon-essentials: ^6.2.9 => 6.2.9
    @storybook/addon-links: ^6.2.9 => 6.2.9
    @storybook/node-logger: ^6.2.9 => 6.2.9
    @storybook/preset-create-react-app: ^3.1.7 => 3.1.7
    @storybook/react: ^6.2.9 => 6.2.9

Additional context
CRA Typescript
Styled Components

In general when Im using storybook now I feell like playing the lottery when definining exports/imports and writing stories.

[crtl]

Im sorry, it was a circular dependency issue and i just wouldnt admit it.
Im closing this now.