“TypeError：无法读取未定义的属性（读取'withConfig'）” styled-components/react/rollup/babel

Question

请帮我解决问题。我正在使用样式组件、反应、故事书为反应应用程序制作我的库。还有用于捆绑的 babel 配置和 rollup。我真的不确定 babel 和 rollup 配置，因为我是第一次自己设置它们。

当我通过故事书检查库如何工作时，一切都很好。但是，当我在 npm 上发布它并尝试在通过 npx create-react-app 创建的另一个 React 项目中使用它时，我不断收到错误“TypeError：无法读取未定义的属性（读取“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.json：

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',
      }),
      commo.njs(),
      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": {}
}

我尝试更改我的 babel 和 rollup 配置，而不是使用“babel-plugin-styled-components”，它确实导致了另一个错误“e.div is not a fucntion”。因为我自己不使用这个插件导致它（我可能是错的）。所以我开始使用“babel-plugin-styled-components”，现在我遇到了这个问题。

如果有人能在这里帮助我，我会非常感激。

Answer 1

使用导入语句作为

import {styled} from styled-components;