React组件库发布后在CRA中出现styled-components withConfig未定义错误

自行配置Babel+Rollup，基于styled-components、React、Storybook开发React组件库，在Storybook中验证正常，但发布到npm后，在npx create-react-app创建的项目中使用时控制台持续报错：TypeError: Cannot read properties of undefined (reading 'withConfig')，应用无法正常显示。

• 不使用babel-plugin-styled-components时会出现e.div is not a function错误
• 使用该插件则出现上述withConfig相关错误

配置文件 #

.babelrc

{
  "env": {
    "development": {
      "plugins": [
        [
          "babel-plugin-styled-components",
          { "ssr": true, "displayName": true, "preprocess": false }
        ],
        [
          "module-resolver",
          {
            "alias": {
              "@src": ["./src"],
              "@components": ["./src/components"],
              "@utils": ["./src/utils"]
            }
          }
        ]
      ],
      "presets": ["@babel/preset-react", "@babel/preset-env"]
    },
    "production": {
      "plugins": [
        [
          "babel-plugin-styled-components",
          { "ssr": true, "displayName": true, "preprocess": false }
        ]
      ],
      "presets": ["@babel/preset-react", "@babel/preset-env"]
    }
  },
  "plugins": [
    [
      "styled-components",
      { "ssr": true, "displayName": true, "preprocess": false }
    ]
  ]
}

rollup.config.js

import babel from '@rollup/plugin-babel';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import alias from '@rollup/plugin-alias';
import { terser } from 'rollup-plugin-terser';
import commonjs from '@rollup/plugin-commonjs';

export default [
  {
    input: './src/index.js',
    external: [
      'react',
      'react-dom',
      'styled-components',
      'prop-types',
      'react-icons',
    ],
    output: [
      {
        file: 'dist/index.js',
        format: 'cjs',
      },
      {
        file: 'dist/index.es.js',
        format: 'es',
        exports: 'named',
      },
    ],

    plugins: [
      peerDepsExternal(),
      resolve(),
      alias({
        resolve: ['.js', '.ts', '.tsx', '.jsx'],
        entries: [
          {
            find: '@src',
            replacement: './src',
          },
          {
            find: '@components',
            replacement: './src/components',
          },
          {
            find: '@utils',
            replacement: './src/utils',
          },
        ],
      }),
      resolve({
        extensions: ['.js', '.jsx', '.mjs', '.json'],
        browser: true,
      }),
      babel({
        exclude: 'node_modules/**',
        plugins: [
          [
            'babel-plugin-styled-components',
            { ssr: true, displayName: true, preprocess: false },
          ],
          [
            'module-resolver',
            {
              alias: {
                '@src': ['./src'],
                '@components': ['./src/components'],
                '@utils': ['./src/utils'],
              },
            },
          ],
        ],
        presets: ['@babel/preset-react', '@babel/preset-env'],
        babelHelpers: 'bundled',
      }),
      commonjs(),
      terser(),
    ],
  },
];

package.json

"description": "",
  "main": "dist/index.js",
  "module": "dist/index.mjs",
  "devDependencies": {
    "@babel/cli": "^7.19.3",
    "@babel/core": "^7.20.2",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@cypress/react": "^7.0.1",
    "@rollup/plugin-alias": "^4.0.2",
    "@rollup/plugin-babel": "^6.0.2",
    "@rollup/plugin-commonjs": "^23.0.2",
    "@rollup/plugin-node-resolve": "^15.0.1",
    "@storybook/addon-actions": "^6.5.13",
    "@storybook/addon-essentials": "^6.5.13",
    "@storybook/addon-interactions": "^6.5.13",
    "@storybook/addon-links": "^6.5.13",
    "@storybook/builder-webpack4": "^6.5.13",
    "@storybook/manager-webpack4": "^6.5.13",
    "@storybook/react": "^6.5.13",
    "@storybook/testing-library": "^0.0.13",
    "@storybook/testing-react": "^1.3.0",
    "babel-loader": "^8.3.0",
    "babel-plugin-module-resolver": "^4.1.0",
    "babel-plugin-styled-components": "^2.0.7",
    "cypress": "^11.2.0",
    "eslint": "8.2.0",
    "eslint-config-airbnb": "19.0.4",
    "eslint-plugin-import": "2.25.3",
    "eslint-plugin-jsx-a11y": "6.5.1",
    "eslint-plugin-react": "7.28.0",
    "eslint-plugin-react-hooks": "4.3.0",
    "prettier": "2.7.1",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.6.0",
    "rollup": "^3.4.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-terser": "^7.0.2",
    "styled-components": "^5.3.6"
  },
  "peerDependencies": {
    "prop-types": ">=15.8.1",
    "react": ">=18.2.0",
    "react-dom": ">=18.2.0",
    "react-icons": ">=4.6.0",
    "styled-components": ">=5.3.6"
  },
  "resolutions": {
    "styled-components": "^5"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "build": "rollup -c --bundleConfigAsCjs",
    "test:cypress": "cypress open"
  },
  "author": "Victoria",
  "license": "ISC",
  "dependencies": {}
}

1. 修复.babelrc的插件配置错误 #

根节点plugins中写的styled-components是错误的插件名称，且与env内的配置重复，会导致插件加载异常。删除根节点的plugins字段：

{
  "env": {
    "development": {
      "plugins": [
        [
          "babel-plugin-styled-components",
          { "ssr": true, "displayName": true, "preprocess": false }
        ],
        [
          "module-resolver",
          {
            "alias": {
              "@src": ["./src"],
              "@components": ["./src/components"],
              "@utils": ["./src/utils"]
            }
          }
        ]
      ],
      "presets": ["@babel/preset-react", "@babel/preset-env"]
    },
    "production": {
      "plugins": [
        [
          "babel-plugin-styled-components",
          { "ssr": true, "displayName": true, "preprocess": false }
        ]
      ],
      "presets": ["@babel/preset-react", "@babel/preset-env"]
    }
  }
}

2. 修正package.json的模块入口不一致问题 #

module字段指向的dist/index.mjs与Rollup输出的dist/index.es.js不匹配，修改为：

"main": "dist/index.js",
"module": "dist/index.es.js"

3. 简化Rollup的Babel配置，避免重复处理 #

Rollup的Babel插件无需重复配置presets和plugins，直接读取.babelrc即可，减少冲突：

// rollup.config.js
import babel from '@rollup/plugin-babel';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import alias from '@rollup/plugin-alias';
import { terser } from 'rollup-plugin-terser';
import commonjs from '@rollup/plugin-commonjs';

export default [
  {
    input: './src/index.js',
    external: [
      'react',
      'react-dom',
      'styled-components',
      'prop-types',
      'react-icons',
    ],
    output: [
      {
        file: 'dist/index.js',
        format: 'cjs',
      },
      {
        file: 'dist/index.es.js',
        format: 'es',
        exports: 'named',
      },
    ],

    plugins: [
      peerDepsExternal(),
      alias({
        resolve: ['.js', '.ts', '.tsx', '.jsx'],
        entries: [
          {
            find: '@src',
            replacement: './src',
          },
          {
            find: '@components',
            replacement: './src/components',
          },
          {
            find: '@utils',
            replacement: './src/utils',
          },
        ],
      }),
      resolve({
        extensions: ['.js', '.jsx', '.mjs', '.json'],
        browser: true,
      }),
      babel({
        exclude: 'node_modules/**',
        babelHelpers: 'bundled',
        configFile: './.babelrc'
      }),
      commonjs(),
      terser(),
    ],
  },
];

4. 确保依赖正确传递 #

在使用组件库的create-react-app项目中，安装匹配版本的styled-components：

npm install styled-components@^5.3.6

5. 重新构建发布 #

清理旧产物，重新构建后发布到npm：

rm -rf dist
npm run build
npm publish

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