Styled component cause error in creating react component library

Question

I'm trying to publish my React component library. But I got an error when I installed my library and tested it in create-react-app.

I tried to change many templates of the React component library. For example Rinsejs and create-react-library. But it still not work.

This is my repository. https://github.com/Tauhoo/omni-slide-editor

I install my library via Npm in create-react-app and use it as below.

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

I expect the browser will show my component. But got an error in the browser.

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

Answer 1

Finally, I figure out what the problem is in .babelrc. I use the Styled components for editing my SVG file. But babel didn't handle it. So when the library was imported. The SVG file turns into undefined. And Styled components can't handle it.

So I need to add a new plugin to file .babelrc that can handle with SVG file. I use babel-plugin-styled-components.