[Bug]: Storybook + webpack 5 + redux 不起作用 (ChunkLoadError)

50few1ms  于 4个月前  发布在  Webpack
关注(0)|答案(1)|浏览(48)

描述问题

我有一个安装了storybook v6.4.19的仓库。一切都正常,直到storybook更新到v7.4.5。
有两个组件 SidebarLoaderSidebar 有redux装饰器,而Loader没有。当使用命令 npm run storybook 运行storybook并打开Sidebar.stories时,会显示以下错误:

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

尽管Loader.stories正常显示。

重现方法

要重现错误,需要将redux-toolkit^1.8.0、react-redux^7.2.6、storybook^7.4.5添加到项目中
创建一个store并添加 StoreDecoratorStoreProvider
红色ux装饰器 StoreDecorator 如下所示:

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 如下所示:

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 组件如下所示:

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,
            },
        }),
    ],
};

系统信息

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

其他上下文信息

依赖项:

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

我的带有此bug的仓库是 https://github.com/microlabig/storybook-test

shyt4zoc

shyt4zoc1#

__API__: '' 替换为 __API__: JSON.stringify('')

相关问题