Distributing React UI Library with styled components

Question

I am a junior developer who just started working in a company.

I have a bit of experience in React and could not solve the current situation.

The situation i am having a trouble with is that when I import from the library that I have distributed in npm, my React project cannot recognize the styled components.

I get this error on my project. enter image description here

I have researched and realized that the babel needs more options such as using "babel-plugin-styled-components" option.

Unfortunately, this did not work after using the command and distributed with the commands

yarn build == webpack --mode production

Is there anyway that I can use styled-components library??

thank you!

P:S: I think I need to put more information.

Many people thankfully answered my question but I tried them and I got an another error. enter image description here

P.S: My file structure:

enter image description here

My code of Button

export const StyledButton = styled.button`
  background-color: white;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0.5em 1em;
  padding: 0.25em 1em;
      ${props => props.primary && css`
        background: palevioletred;
        color: white;
      `}
    `;
export default class Button extends React.Component {
  constructor(props) {
    super(props);
   console.log("Props:", props);
}
render() {
  return (
  <div>
    <StyledButton>{this.props.children}</StyledButton>
    {/* <button> {this.props.children} </button> */}
  </div>);
}

}

My index.js of Button

import Button from "./Button";

export default Button;

My index.js of src folder

export * from "./components";

My babel.config.js

module.exports = function BabelConfigJS(api) {
api.cache(true);

const presets = ["@babel/preset-env", "@babel/preset-react"];

const plugins = [
    "styled-components",
    [
        "@babel/plugin-transform-runtime",
        {
            corejs: 2,
            helpers: true,
            regenerator: true,
            useESModules: false,
        },
    ],
    [
        "@babel/plugin-proposal-class-properties",
        {
            loose: true,
        },
    ], 
];

return {
    sourceType: "unambiguous",
    presets,
    plugins,
};
};

PS: Error code

enter image description here

Welcome to SO! Can you post the actual error you're receiving, as well as the code for the component? All the image is showing is that you have an error in the component, which doesn't help us when trying to help you. — displacedtexan

AKX AKX · Accepted Answer · 2020-02-25T20:17:57

The error (which really is just an Eslint complaint) does not refer to using styled-components at all!

It's just saying components should be in PascalCase, not camelCase as you have now.

That is, instead of <styledComponent />, it'd be <StyledComponent />.

Distributing React UI Library with styled components

2 Answers