Storybook中使用styled-component封装组件报Cannot read properties of undefined错误

该报错核心是styled-components相关语法在Storybook环境未被正确解析，结合你使用的版本组合，触发原因有两个：

1. 组件文件漏写styled依赖导入，component/style.ts中直接使用styled语法但没有提前引入styled-components依赖
2. Storybook 6.3.x版本默认未集成styled-components的babel解析逻辑，模板字符串格式的样式代码无法被正常识别，读取样式内容数组时索引为0的项不存在就触发了该报错

按以下三步操作即可修复：

• 第一步：补全组件的依赖导入
  修正component/style.ts代码，新增styled导入：

  import styled from 'styled-components'
  import { Flex } from "rebass"
  
  export const StyledFlex = styled(Flex)`
    // css...
  `
  

• 第二步：安装对应版本的styled-components适配addon
  执行安装命令，注意版本要和你当前使用的Storybook版本保持一致：
  npm i @storybook/addon-styled-component@6.3.8 -D
• 第三步：更新Storybook配置注册addon
  修改.storybook/main.js的addons数组，新增适配插件：

  const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
  
  module.exports = {
    stories: [ //root setup is ok
  ],
    addons: [
      "@storybook/addon-links",
      "@storybook/addon-essentials",
      "@storybook/addon-actions",
      "@storybook/addon-styled-component" // 新增该行
    ],
    webpackFinal: async (config, { configType }) => {
      config.resolve.plugins = [new TsconfigPathsPlugin()];
      return config;
    },
  };
  

如果完成以上操作后仍有报错，可以在.storybook/preview.js文件头部新增全局导入import 'styled-components'，重启Storybook服务即可生效。

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