Next.js运行yarn storybook提示browser字段无有效别名配置

Field 'browser' doesn't contain a valid alias configuration 这个报错在当前场景下，是Storybook独立运行的webpack构建流程没有读取项目jsconfig.json中定义的路径别名导致的。Next.js启动时框架内部会自动加载jsconfig的别名规则，所以正常跑项目不会出问题，但Storybook有独立的构建配置，默认不会同步Next.js的路径解析逻辑，模块找不到对应别名映射的文件时就会抛出该错误。

• 先安装路径解析依赖，执行命令：
  yarn add -D tsconfig-paths-webpack-plugin
  这个插件同时兼容tsconfig.json和jsconfig.json的路径配置，不需要额外安装其他包。
• 修改.storybook/main.js配置，扩展webpack解析逻辑，同步jsconfig的别名规则，修改后的完整配置如下：

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const path = require('path');

module.exports = {
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  core: {
    builder: {
      name: "webpack5",
      options: {
        fsCache: true,
      },
    },
  },
  stories: ["../src/**/*.stories.@(js|mdx)"],
  webpackFinal: async (config) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        configFile: path.resolve(__dirname, '../jsconfig.json'),
        extensions: config.resolve.extensions,
      }),
    ];
    // 若jsconfig里配置了@映射src目录，也可以直接手动写死别名兜底，避免插件解析异常
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname, '../src'),
    };
    return config;
  },
};

• 清理Storybook缓存后重新启动即可，执行命令：
  rm -rf node_modules/.cache/storybook && yarn storybook

如果配置完成后依然报相同错误，先检查项目根目录jsconfig.json的baseUrl配置是否正确，Next.js项目下该字段通常设置为.（代表项目根目录），路径配置不要出现多层相对路径的写法，避免解析偏移。

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