Стилизованный компонент вызывает ошибку при создании библиотеки реагирующих компонентов

Question

Я пытаюсь опубликовать свою библиотеку компонентов React. Но я получил ошибку, когда установил свою библиотеку и протестировал ее в create-реагировать-приложение.

Я попытался изменить многие шаблоны библиотеки компонентов React. Например Rinsejs и создать-реагировать-библиотека. Но это все еще не работает.

Это мой репозиторий. https://github.com/Tauhoo/omni-slide-editor

Я устанавливаю свою библиотеку через Npm в create-реагировать-приложение и использую ее, как показано ниже.

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-файла. Но Бабел с этим не справился. Итак, когда библиотека была импортирована. Файл SVG превращается в неопределенный. И стилизованные компоненты не могут с этим справиться.

Поэтому мне нужно добавить новый плагин в файл .babelrc, который может обрабатывать SVG-файл. Я использую babel-plugin-styled-components.