本地运行Storybook测试时Mukta字体报错的解决方法

问题场景 #

本地运行Storybook时触发以下错误：

error: TypeError: (0 , next_font_google__WEBPACK_IMPORTED_MODULE_0__.Mukta) is not a function

字体加载代码如下：

import { Mukta } from 'next/font/google';

const mukta = Mukta({
  subsets: ['latin'],
  weight: ['400', '600', '700'],
});

当前.storybook/main.js配置：

/** @type { import('@storybook/react-webpack5').StorybookConfig } */
const config = {
  stories: [
    // '../stories/**/*.mdx',
    // '../stories/**/*.stories.@(js|jsx|ts|tsx)',
    '../**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    {
      name: 'storybook-addon-swc',
      options: {
        enable: true,
        enableSwcLoader: true,
        enableSwcMinify: true,
        swcLoaderOptions: {},
        swcMinifyOptions: {},
      },
    },
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {
      
    },
  },
  docs: {
    autodocs: 'tag',
  },
};
export default config; 

解决方法 #

方案1：移除storybook-addon-swc插件

@storybook/nextjs框架已经内置了SWC编译支持，额外引入第三方SWC插件会和内置处理逻辑冲突，导致Next.js字体模块的导出解析异常。

修改.storybook/main.js，删除SWC插件相关配置：

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

方案2：调整字体导入方式（备选）

如果需要保留SWC插件，尝试修改字体导入路径为具体字体文件：

import Mukta from 'next/font/google/Mukta';

const mukta = Mukta({
  subsets: ['latin'],
  weight: ['400', '600', '700'],
});

方案3：更新依赖版本

确保Storybook和Next.js版本兼容，升级到最新稳定版：

npm update @storybook/nextjs next
# yarn用户执行：
yarn upgrade @storybook/nextjs next

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