我已经将Nx包升级到最新版本14. 7. 5,它破坏了我的Storybook构建,该构建仍在使用Webpack 4。因此,我认为将其更新到Webpack 5可能会解决该问题,迁移后,它正在成功构建,但是Storybook卡在主页面上,无限显示加载动画,(XHR调用/progress
从未返回),并且在控制台中出现Uncaught ReferenceError: exports is not defined
错误。此错误来自于JS中的一个生成文件(其余文件在TypeScript中)。我不确定此错误是否导致无限加载,但这是我唯一的线索。
当我静态地构建Storybook时,它在编译期间也会显示以下警告:
export 'AssetService' (reexported as 'AssetService') was not found in './protos/Asset_pb_service' (module has no exports)
它来自与控制台中的错误相同的文件,因此它可能是连接的(尽管文件有导出)。
我的主要Storybook配置:
module.exports = {
core: {
builder: 'webpack5',
},
typescript: { reactDocgen: false },
stories: [],
addons: [
{
name: '@storybook/addon-essentials',
options: {
backgrounds: true,
viewport: false,
},
},
'@nrwl/react/plugins/storybook',
'storybook-dark-mode'
],
};
主应用程序的故事书配置:
// This loads the configuration above
const rootMain = require('../../../.storybook/main');
module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
stories: [
...rootMain.stories,
'../src/**/*.stories.mdx',
'../src/**/*.stories.@(js|jsx|ts|tsx)',
'../*.stories.mdx',
'../../../libs/**/*.stories.mdx',
'../../../libs/**/*.stories.@(js|jsx|ts|tsx)',
],
webpackFinal: async (config, { configType }) => {
// apply any global webpack configs that might have been specified in .storybook/main.js
if (rootMain.webpackFinal) {
config = await rootMain.webpackFinal(config, { configType });
}
// add your own webpack tweaks if needed
return config;
},
};
故事书软件包版本:
"@storybook/addon-docs": "6.5.12",
"@storybook/addon-essentials": "6.5.12",
"@storybook/builder-webpack5": "6.5.12",
"@storybook/core-server": "6.5.12",
"@storybook/manager-webpack5": "6.5.12",
"@storybook/react": "6.5.12",
任何帮助都将不胜感激。
1条答案
按热度按时间az31mfrm1#
这是由
preview.js
引起的,它用一些提供程序 Package 每个故事,并间接导入导致错误的JS文件。看起来这个preview.js
的编译方式与故事的编译方式不同,因为在将有问题的提供程序移到需要它们的故事后,Storybook又开始工作了。**编辑:**实际上,在将有问题的提供者转移到故事中后,问题并没有消失,只是故事现在不工作了,但这总比整个故事书不工作要好。