样式化组件导致创建反应组件库时出错答案

【问题标题】：Styled component cause error in creating react component library样式化组件导致创建反应组件库时出错
【发布时间】：2020-02-29 15:27:33
【问题描述】：

我正在尝试发布我的 React 组件库。但是当我安装我的库并在 create-react-app 中对其进行测试时出现错误。

我尝试更改 React 组件库的许多模板。例如 Rinsejs 和 create-react-library。但是还是不行。

这是我的存储库。 https://github.com/Tauhoo/omni-slide-editor

我通过 Npm 在 create-react-app 中安装我的库，并按如下方式使用它。

import React from "react"
import logo from "./logo.svg"
import Controller from "omni-slide-editor"

import "./App.css"

function App() {
  return (
    <div className='App'>
      <header className='App-header'>
        <img src={logo} className='App-logo' alt='logo' />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className='App-link'
          href='https://reactjs.org'
          target='_blank'
          rel='noopener noreferrer'
        >
          Learn React
        </a>
        <Controller
          data={{
            height: "1000px",
            width: "1000px",
            elementList: [],
          }}
        ></Controller>
      </header>
    </div>
  )
}

export default App

我希望浏览器会显示我的组件。但在浏览器中出现错误。

Error: Cannot create styled-component for component: undefined.

【问题讨论】：

问题出在你的库而不是 npm/styled-component
你能告诉我问题是什么吗？

标签： javascript reactjs babeljs styled-components

【解决方案1】：

最后，我找出了.babelrc 中的问题所在。我使用 Styled 组件来编辑我的 SVG 文件。但是 babel 没有处理它。所以当库被导入时。 SVG 文件变为未定义。并且 Styled 组件无法处理它。

所以我需要在 .babelrc 文件中添加一个可以处理 SVG 文件的新插件。我使用 babel-plugin-styled-components。

【讨论】：