webpack升级至5.51.1后运行Storybook报resolved属性未定义错误如何解决

根因说明 #

该报错由webpack 5.51.0版本引入的内部逻辑缺陷导致：你使用的./**通配符会匹配到.storybook目录下的main.js、preview.js等Storybook原生配置文件，webpack处理这些非stories文件时触发了FileSystemInfo模块的空指针异常。

解决方案 #

方案一：添加glob否定规则（无需修改原有匹配逻辑） #

不需要移动stories目录，也不需要显式指定stories目录路径，仅在匹配规则中排除不需要识别的配置文件即可，修改main.js的stories字段：

stories: [
  './**/*.stories.@(js|jsx|ts|tsx|mdx)',
  // 排除.storybook根目录下的配置文件
  '!./@(main|preview|manager).@(js|ts)',
  '!././*.@(js|ts)x?'
],

方案二：新增webpack兼容配置（无需调整stories匹配规则） #

直接在配置中添加webpack参数兼容该版本缺陷，完全不需要修改原有stories匹配逻辑：

'use strict';

const path = require('path');

module.exports = {
  stories: [
    './**/*.stories.@(js|jsx|ts|tsx|mdx)'
  ],
  core: {
    builder: 'webpack5'
  },
  // 新增webpack兼容配置
  webpackFinal: async (config) => {
    config.snapshot = config.snapshot || {};
    config.snapshot.managedPaths = [];
    return config;
  },
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-docs',
    '@storybook/addon-contexts/register',
    '@storybook/addon-controls',
    {
      name: '@storybook/addon-essentials',
      options: {
        backgrounds: true
      }
    }
  ]
};

两种方案均符合你的要求，不需要移动stories目录，也不需要使用./stories/**这类显式指定stories目录的路径。

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