storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.77k stars 9.34k forks source link

[Bug]: Storybook + webpack 5 + redux does not work (ChunkLoadError) #24315

Open microlabig opened 1 year ago

microlabig commented 1 year ago

Describe the bug

I have a repository with storybook v6.4.19 installed. Everything worked until the storybook was updated to v7.4.5.

There are two components Sidebar and Loader. Sidebar has a redux decorator, Loader does not. When running storybook with the command npm run storybook and opening Sidebar.stories, the following error is displayed:

ChunkLoadError: Loading chunk widgets-Sidebar-ui-Sidebar-Sidebar-stories failed.

Although Loader.stories displays normally.

2023-09-27_12-02

To Reproduce

To reproduce the error, you need to add redux-toolkit^1.8.0, react-redux^7.2.6, storybook^7.4.5 to the project

Create a store and add StoreDecorator and StoreProvider

The redux decorator StoreDecorator looks like this:

import { StoryFn } from '@storybook/react';
import { StateSchema, StoreProvider } from 'app/providers/StoreProvider';

export const StoreDecorator =
    (initialState: DeepPartial<StateSchema>) => (Story: StoryFn) =>
        (
            <StoreProvider
                initialState={initialState as StateSchema}
            >
                <Story />
            </StoreProvider>
        );

StoreProvider looks like this:

import { ReactNode } from 'react';
import { Provider } from 'react-redux';
import { createReduxStore } from 'app/providers/StoreProvider/config/store';
import { StateSchema } from 'app/providers/StoreProvider/config/StateSchema';

interface StoreProviderProps {
    children?: ReactNode;
    initialState?: DeepPartial<StateSchema>;
}

export const StoreProvider = (props: StoreProviderProps) => {
    const {
        children,
        initialState,
    } = props;

    const store = createReduxStore(
        initialState as StateSchema,
    );

    return (
        <Provider store={store}>
            {children}
        </Provider>
    );
};

Sidebar.stories component looks like this:

import type { Meta, StoryObj } from '@storybook/react';

import { StoreDecorator } from 'shared/config/storybook/StoreDecorator';
import { Sidebar } from './Sidebar';

const meta = {
    title: 'widget/Sidebar',
    component: Sidebar,
    decorators: [
        StoreDecorator({
            user: {
                authData: {},
            },
        }),
    ],
} as Meta<typeof Sidebar>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Light: Story = {};

export const NoAuth: Story = {
    decorators: [
        StoreDecorator({
            user: {
                authData: undefined,
            },
        }),
    ],
};

System

Environment Info:

  System:
    OS: Linux 5.15 Ubuntu 20.04.4 LTS (Focal Fossa)
    CPU: (20) x64 Intel(R) Core(TM) i9-10850K CPU @ 3.60GHz
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
  Browsers:
    Chrome: 114.0.5735.133
  npmPackages:
    @storybook/addon-actions: ^7.4.5 => 7.4.5 
    @storybook/addon-essentials: ^7.4.5 => 7.4.5 
    @storybook/addon-interactions: ^7.4.5 => 7.4.5 
    @storybook/addon-links: ^7.4.5 => 7.4.5 
    @storybook/react: ^7.4.5 => 7.4.5 
    @storybook/react-webpack5: ^7.4.5 => 7.4.5 
    @storybook/testing-library: ^0.2.1 => 0.2.1

Additional context

deps:

"react": "^17.0.2",
"@reduxjs/toolkit": "^1.8.0",
"react-redux": "^7.2.6",
"storybook": "^7.4.5",

My repo with this bug is https://github.com/microlabig/storybook-test

jakiehan commented 6 months ago

File ..config/storybook/webpack.config.ts

replace __API__: '', with __API__: JSON.stringify(''),