构建StoryBook时ESLint报@storybook/react导入错误如何解决

已安装StoryBook与ESLint环境，执行Storybook构建操作时，ESLint抛出导入相关校验错误，具体错误信息：

• 第1行第9列： 无法从@storybook/react中找到命名导出ComponentMeta，触发规则：import/named
• 第1行第24列：无法从@storybook/react中找到命名导出ComponentStory，触发规则：import/named

module.exports = {
"env": {
    "browser": true,
    "es2021": true
},
"overrides": [
    {
        "files": ['*.stories.@(ts|tsx|js|jsx|mjs|cjs)'],
        "rules": {
            'storybook/hierarchy-separator': 'error',
            'storybook/default-exports': 'off',
            "import/no-extraneous-dependencies": "off",
        }
    }
],
"settings": {
    "import/resolver": {
        "node": {
            "extensions": [".js", ".jsx", ".ts", ".tsx",]
        }
    },

},
"extends": ["eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
    "plugin:import/recommended",
    "plugin:storybook/recommended",
    "prettier"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
    "ecmaFeatures": {
        "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
},
"plugins": ["react", "@typescript-eslint"],
"rules": {
    "react/prop-types": "off",
    "react/react-in-jsx-scope": "off",
    'react/jsx-filename-extension': [2, {
        'extensions': ['.js', '.jsx', '.ts', '.tsx']
    }],
    "@typescript-eslint/no-explicit-any": ["off"],
    "@typescript-eslint/no-unused-vars": "off",
    "react/no-unescaped-entities": 0,

}
};

这个报错的核心原因是import/named规则校验时，未在@storybook/react的导出列表中识别到ComponentMeta、ComponentStory两个命名导出，按以下顺序排查即可：

• 先核对本地Storybook版本
  Storybook 7.0及以上版本已经正式移除ComponentMeta、ComponentStory两个类型，替换为Meta、StoryObj。如果本地安装的是7.x版本，直接修改stories文件的导入语句即可：

  // 旧版6.x写法（7.x已废弃）
  // import { ComponentMeta, ComponentStory } from '@storybook/react';
  // 新版7.x写法
  import type { Meta, StoryObj } from '@storybook/react';
  

  同步修改文件内对应的类型声明代码即可解决报错。
• 若使用Storybook 6.x版本（两个类型正常存在），则修复ESLint导入解析配置
  1. 安装TypeScript导入解析依赖：执行命令npm install -D eslint-import-resolver-typescript
  2. 修改ESLint配置中的settings.import/resolver字段，添加typescript解析规则：

  "settings": {
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true
      },
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
  

  3. 如果是纯JS项目未使用TypeScript，可直接在stories文件的规则覆写项中关闭import/named规则，避免类型导出识别不准导致的误报：

  "overrides": [
    {
      "files": ['*.stories.@(ts|tsx|js|jsx|mjs|cjs)'],
      "rules": {
        'storybook/hierarchy-separator': 'error',
        'storybook/default-exports': 'off',
        "import/no-extraneous-dependencies": "off",
        "import/named": "off"
      }
    }
  ]
  

• 缓存清理
  完成上述修改后，删除node_modules/.cache目录，重新执行Storybook构建命令即可，避免旧缓存导致的识别错误。

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