Next.js项目安装Storybook失败：TypeError: wnt.default is not a function

执行npx storybook@latest init触发TypeError: wnt.default is not a function错误，通常和依赖缓存冲突、版本兼容性问题有关，可尝试以下方案解决：

• 清理包管理器缓存
  先清空缓存避免旧依赖干扰：

  # npm 用户
  npm cache clean --force
  
  # yarn 用户
  yarn cache clean
  

• 删除旧依赖文件
  删除项目根目录下的node_modules文件夹，以及package-lock.json（npm）或yarn.lock（yarn）锁文件，彻底重置依赖环境。

• 指定稳定版本安装
  最新版Storybook可能存在兼容性bug，可尝试指定一个经过验证的稳定版本初始化：

  npx storybook@7.6.0 init
  

• 检查Node.js版本
  Storybook对Node.js版本有要求，建议使用LTS版本（如18.x或20.x）。用node -v查看当前版本，版本不符的话，可通过nvm等工具切换或升级Node.js。

• 手动安装配置Storybook
  如果自动初始化失败，可手动安装核心依赖并配置：

  1. 安装依赖：

  npm install @storybook/nextjs @storybook/addon-essentials @storybook/addon-interactions @storybook/react --save-dev
  

  2. 在项目根目录创建.storybook文件夹，添加main.js配置文件：

  /** @type { import('@storybook/nextjs').StorybookConfig } */
  const config = {
    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
    addons: [
      '@storybook/addon-links',
      '@storybook/addon-essentials',
      '@storybook/addon-interactions',
    ],
    framework: {
      name: '@storybook/nextjs',
      options: {},
    },
    docs: {
      autodocs: 'tag',
    },
  };
  export default config;
  

  3. 添加preview.js配置文件（用于全局样式和参数设置）：

  // 导入项目全局样式，根据实际路径调整
  import '../styles/globals.css';
  
  /** @type { import('@storybook/react').Preview } */
  const preview = {
    parameters: {
      actions: { argTypesRegex: '^on[A-Z].*' },
      controls: {
        matchers: {
          color: /(background|color)$/i,
          date: /Date$/,
        },
      },
    },
  };
  
  export default preview;
  

  4. 确保package.json的scripts中包含：

  "storybook": "storybook dev -p 6006",
  "storybook:build": "storybook build"
  

完成以上步骤后，执行npm run storybook启动验证安装是否成功。

内容的提问来源于stack exchange，提问作者Milena