使用Rollup构建组件库时出现TypeError: styled is not a function错误

可能的成因与对应解决方案 #

1. 模块导入未取默认导出 #

构建后的代码中直接使用require('styled-components')获取styled，但styled-components的CommonJS导出中，默认导出挂载在.default属性上。修改构建后的代码（或调整Rollup配置自动处理）：

var styled = require('styled-components').default;

2. Rollup打包配置错误 #

检查Rollup配置，确保正确处理外部依赖与模块导出：

• 配置external选项，将styled-components、react、framer-motion设为外部依赖，避免打包时破坏模块导出结构：

  // rollup.config.js
  export default {
    external: ['react', 'styled-components', 'framer-motion'],
    // 其他配置...
  };
  

• 确保安装并启用@rollup/plugin-commonjs和@rollup/plugin-node-resolve插件，正确解析CommonJS模块：

  // rollup.config.js
  import commonjs from '@rollup/plugin-commonjs';
  import resolve from '@rollup/plugin-node-resolve';
  
  export default {
    plugins: [resolve(), commonjs()],
    // 其他配置...
  };
  

• 若组件库同时支持ES模块和CommonJS，可在output中指定多种格式：

  output: [
    { file: 'dist/index.cjs.js', format: 'cjs' },
    { file: 'dist/index.esm.js', format: 'es' }
  ]
  

  并在package.json中声明对应入口：

  {
    "main": "dist/index.cjs.js",
    "module": "dist/index.esm.js"
  }
  

3. 版本冲突 #

检查组件库与Next.js项目中styled-components的版本，确保两者使用相同的主版本（如均为v5或v6）。可通过以下命令查看版本：

# 查看组件库版本
npm list styled-components
# 查看Next.js项目版本
cd your-nextjs-project && npm list styled-components

若版本不一致，统一升级或降级到匹配版本。

4. Next.js项目未正确配置styled-components #

Next.js中需要配置babel插件以支持styled-components的运行时：

• 安装babel-plugin-styled-components：

  npm install --save-dev babel-plugin-styled-components
  

• 在项目根目录创建.babelrc或babel.config.js：

  // babel.config.js
  module.exports = {
    presets: ['next/babel'],
    plugins: [['styled-components', { ssr: true }]]
  };
  

• 若使用Next.js 13+ App Router，需确保在next.config.js中启用styled-components支持：

  // next.config.js
  /** @type {import('next').NextConfig} */
  const nextConfig = {
    compiler: {
      styledComponents: true,
    },
  };
  
  module.exports = nextConfig;
  

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