描述问题
我有一个安装了storybook v6.4.19的仓库。一切都正常,直到storybook更新到v7.4.5。
有两个组件 Sidebar
和 Loader
。 Sidebar
有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并添加 StoreDecorator
和 StoreProvider
红色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
1条答案
按热度按时间shyt4zoc1#
将
__API__: ''
替换为__API__: JSON.stringify('')