reactjs 获取“TypeError:当将Storybook添加到新的Next项目时,previewBuilder.corePresets不可迭代

thtygnil  于 2023-04-20  发布在  React
关注(0)|答案(3)|浏览(135)

我是新的故事书,但我已经做了一些搜索,这是空的。
我创建了一个新的NextJS项目,添加了ESLint,Jest和Tailwind,一切都很好。
我正在尝试使用这些方向添加Storybook:https://storybook.js.org/blog/get-started-with-storybook-and-next-js/
当我输入yarn storybook时,我得到这个错误。

info @storybook/react v6.4.18
info 
ERR! TypeError: previewBuilder.corePresets is not iterable
ERR!     at buildDevStandalone (/Users/james/Projects/TekPartners/InterviewQuestionBank/tekp_question_bank_fe/node_modules/@storybook/core-server/dist/cjs/build-dev.js:105:112)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
ERR!     at async buildDev (/Users/james/Projects/bank_fe/node_modules/@storybook/core-server/dist/cjs/build-dev.js:161:5)
ERR!  TypeError: previewBuilder.corePresets is not iterable
ERR!     at buildDevStandalone (/Users/james/Projects/bank_fe/node_modules/@storybook/core-server/dist/cjs/build-dev.js:105:112)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
ERR!     at async buildDev (/Users/james/Projects/bank_fe/node_modules/@storybook/core-server/dist/cjs/build-dev.js:161:5)

就像我说的,我一直在寻找一个解决方案,但一无所获。只是为了好玩,我创建了几个NextJS项目,并试图立即安装SB(没有设置ESLint,Jest或Tailwind),但我仍然得到错误。我尝试了博客文章中的WebPack选项,所有三个都给予了我不同的错误(如果有帮助,我可以提供其他的)。
任何帮助将不胜感激!谢谢!

bxpogfeg

bxpogfeg1#

我在从webpack迁移到vite的过程中遇到了同样的错误。
你必须有

// .storybook/main.js
  core: {
    builder: "@storybook/builder-vite",
  },

也尝试删除缓存:rm -rf node_modules/.cache .
如果您使用vite作为构建器,请确保已删除所有webpack构建器/管理器。

rqenqsqc

rqenqsqc2#

我在从webpack迁移到vite时也遇到了同样的错误,但另一个答案对我不起作用。起作用的是以下内容:
1.正在备份我的.storybook目录
1.卸载我的package.json中列出的所有故事书包,例如npm un @storybook/react @storybook/addon-actions
1.重新运行故事书设置脚本npx @storybook/latest init
1.将所有相关设置从备份的.storybook目录恢复到新生成的目录

qmelpv7a

qmelpv7a3#

我有同样的问题与vite故事书版本6. x. x,也我面临的问题与@别名,然后我permormed以下步骤。
1.删除.storybook文件夹
1.从package.json中删除所有与故事书相关的包
1.现在设置vite+故事书作为我的项目设置在vite buileder
1.运行npx storybook@latest init(以下步骤可选,如果您的项目是正常的,即不是企业)
1.手动vite配置(普通项目可选)yarn add --dev @storybook/builder-vite
1.更新.storybook/main.ts文件以获得与vite.config.ts相同的配置

import { mergeConfig } from 'vite';
export default {
    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
    framework: '@storybook/react',
    core: {
        builder: '@storybook/builder-vite',
    },
    async viteFinal(config) {
        // Merge custom configuration into the default config
        return mergeConfig(config, {
            // Add dependencies to pre-optimization
            optimizeDeps: {
                include: ['storybook-dark-mode'],
            },
        });
    },
    staticDirs: ['../public'],
};

done ;)Note:当前故事书版本升级到7.0.x

相关问题