No stylesheet generated by styled-components on nwb reusable component

Question

I've built a reusable react component through nwb new react-component fade-preloader called FadePreloader which uses styled-components, its published on npm so I can use it on other projects, but when its imported as a module its styles are never added to the DOM. The following provides more details about the nwb component.

src folder is:

src/
  FadePreloader.js
  FadePreloader.Styled.js
  index.js

FadePreloader.js:

import React, {Component} from "react"

class FadePreloader extends Component {
  // logic code
}

export default FadePreloader

FadePreloader.Styled.js:

import styled from "styled-components"
import FadePreloader from "./FadePreloader"

const FadePreloader_Styled = styled(FadePreloader)`
  // css here
`

export default FadePreloader_Styled

index.js:

// just import the styled-componet and re-export it
import FadePreloader from "./FadePreloader.Styled"

export default FadePreloader

I have the default configuration in package.json provided by nwb:

FadePreloader is published on npm so I added it on other project (through yarn add fade-preloader) and use it like this:

App.jsx on other project:

// lots of imports here
import FadePreloader from "fade-preloader"

class App extends Component {
  render() {
    return(
      <div>
        <FadePreloader />
      </div>
    )
  }
}

export default App

The FadePreloader component is rendered in the DOM and its class attribute has the className generated by styled-components as espected but the stylesheet is never added to the DOM, no <style> element is present causing an unstyled FadePreloader rendered. What's wrong?

Answer 1

I've found a solution coming from the official spectrum channel of styled-components, see here.

What I had to do was to follow this which basically says that styled-components dependency needs to be moved from dependencies to devDependencies and peerDependencies in package.json. I'm not sure the reason but it seems to be to avoid some unexpected reason that is generated by duplicated direct dependency of styled-components.