Rollup+TS+Styled-Components构建组件库时useContext报错求助

针对你遇到的构建组件库后渲染按钮时出现的Uncaught TypeError: Cannot read properties of null (reading 'useContext')错误，以下是几个实际可落地的排查和修复方向：

1. 确保Rollup正确排除外部依赖 #

组件库不应将React、ReactDOM和Styled-Components打包进产物，需让消费环境提供这些依赖，否则会出现上下文冲突或重复实例问题。在rollup.config.js中配置external字段：

export default {
  // ...其他配置
  external: ['react', 'react-dom', 'styled-components'],
  output: {
    // ...输出配置
    globals: {
      react: 'React',
      'react-dom': 'ReactDOM',
      'styled-components': 'styled'
    }
  }
};

2. 优化Styled-Components的Babel插件配置 #

确保Babel插件配置完整且适配组件库场景，在babel.config.json或.babelrc中调整：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript",
    ["@babel/preset-react", { "runtime": "automatic" }]
  ],
  "plugins": [
    ["styled-components", {
      "ssr": true,          // 适配SSR场景，避免上下文丢失
      "displayName": true,  // 生成可读的类名，方便调试
      "pure": true          // 帮助Tree-shaking优化
    }]
  ]
}

同时检查Rollup的Babel插件是否正确加载配置，比如使用@rollup/plugin-babel时，确保babelHelpers设置为runtime：

import babel from '@rollup/plugin-babel';

// 在plugins数组中
babel({
  babelHelpers: 'runtime',
  exclude: 'node_modules/**',
  extensions: ['.js', '.jsx', '.ts', '.tsx']
})

3. 验证React与Styled-Components版本兼容性 #

React 18需要Styled-Components v5.3.0及以上版本支持，若版本不匹配会导致上下文API调用异常。执行以下命令更新依赖：

npm update styled-components
# 或
yarn upgrade styled-components

4. 检查Rollup的React插件配置 #

使用@rollup/plugin-react时，确保开启自动JSX runtime支持，避免手动引入React导致的问题：

import react from '@rollup/plugin-react';

// 在plugins数组中
react({
  jsxRuntime: 'automatic',
  babelHelpers: 'runtime'
})

5. 排查组件导出与代码结构 #

• 避免在导出Styled-Components组件时使用不必要的高阶组件包裹，若必须使用，需确保上下文能正确传递；
• 检查组件文件中是否存在未正确导入React的情况（React 17+自动JSX runtime无需手动导入，但旧版本或配置错误时可能需要）；
• 查看Rollup产物中是否存在React被错误置为null的情况，比如Tree-shaking过度导致React核心模块被移除。

内容的提问来源于stack exchange，提问作者Thiago Almeida Amorim