样式化组件导致创建 React 组件库时出错

Question

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

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

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

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

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.

Answer 1

终于，我弄清楚了.babelrc 中的问题所在。我使用 Styled 组件来编辑我的 SVG 文件。但是 babel 没有处理它。所以在导入库的时候。 SVG 文件变为未定义。而 Styled 组件无法处理它。

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

样式化组件导致创建 React 组件库时出错

Styled component cause error in creating react component library

javascript

reactjs

babeljs

styled-components