Styled component warnings, despite correct implementation

[tbgse]

Hi,

I've been following this issue https://github.com/preactjs/preact/issues/2574 but could not find any way to fix this myself. I've created a very minimal repo for reproduction that is based off this example and simply does three things:

1. Adds a custom .babelrc to include the styled components config for SSR
2. Adds a custom _document.js to the pages folder, configured as suggested here: https://github.com/vercel/next.js/blob/master/examples/with-styled-components/pages/_document.js
3. Adds a styled component to the index.js / about.js pages e.g.

import React from 'react'
import Link from 'next/link'
import styled from 'styled-components';

const RedDiv = styled.div`
  width: 500px;
  height: 500px;
  background: red;
`

const Home = () => {
  const [state, setState] = React.useState(0)
  return (
    <main>
      <RedDiv />
      <h1>Hello from Preact</h1>
      <p>{state}</p>
      <button onClick={() => setState(state + 1)}>Increment</button>
      <Link href="/about">
        <a>About</a>
      </Link>
    </main>
  )
}

export default Home;

The result is that when navigating between routes (it does not always happen on initial load, you might have to navigate back and forth a couple of times, or trigger HMR... not 100% sure what triggers the warning exactly), you will see a warning in the console for each styled component that looks like this:

The component pages__RedDiv with the id of "pages__RedDiv-sc-1ttm79m-0" has been created dynamically.
You may see this warning because you've called styled inside another component.
To resolve this only create new StyledComponents outside of any render method and function component.

At this point I am unsure if this is a problem with Preact, Next or styled components, but I felt like this repo might be a good place to start.

Example repo: https://github.com/tbgse/preact-next-styled-component

[marvinhagemeister]

It's something that cannot be worked around as styled-components deliberately creates component inside another one 🤷 Fixing this requires a change in either styled-components or preact itself. See the issue you referenced linked in your post. The nextjs mentions there are for another issue. The poster for some reason hijacked it.

[tbgse]

Thanks for the fast response @marvinhagemeister.

I'm not sure if there was ever any conclusion in the original issue: is this something that you would look into solving in preact? I'm surprised that this issue only started happening after switching from react to preact, so it seems like there must be some difference in how styled-components works with preact? Unless react is simply not outputting these errors.

You mentioned in the issue that This issue can be resolved by adding import "preact/debug" at the top of the main entry file. But it seems like this is already done in the nextjs plugin that this demo is using?

Please do let me know if there is anything I can do to help looking into this.

[marvinhagemeister]

@tbgse See https://github.com/preactjs/preact/pull/2816

[tbgse]

@marvinhagemeister fantastic, thanks!