Question

我正在尝试发布我的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.

Answer 1

最后，我弄清楚了.babelrc中存在的问题。我使用样式化组件编辑SVG文件。但是通天塔没有处理。因此，当导入库时。 SVG文件变为未定义。样式化组件无法处理它。

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

样式化的组件在创建React组件库时导致错误

1 个答案: