styled-components are not working with Next.js SSR

[dhavalveera]

Hello,

I've recently come to know about the babel-plugin-styled-components and added the following code snippet into .babelrc.

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "ssr": false
      }
    ]
  ]
}

but when I explicitly refresh my browser, the styled-components are not working as defined. like styled components don't get loaded as required.

I tried to change the "ssr": true as well but not working.

please anyone can help me to solve the issue I am facing?

[agriffis]

Do you have a minimal example repo to demonstrate the problem?

[dhavalveera]

Do you have a minimal example repo to demonstrate the problem?

import styled from 'styled-components'

const btnName = styled.button`
   color: #ff0000;
   background-color: #00FF00;
   &:hover {}
   &:focus {}
   &focus-visible {}
`;

when I write the above code, and when the page gets hot-reload then it works properly but when I refresh the page for something, then the above styled-components stops working even when `.babelrc` is configured as shown in Documentations.

[agriffis]

Thank you, but that isn't quite what I mean. Please understand that many people are using this successfully with Next.js SSR, including me, so dropping code snippets here isn't likely to be enough for someone to help you.

A minimal example repo is a cloneable GitHub repo that fully demonstrates the issue. Alternatively a codesandbox but since you are specifically reporting a problem on Next.js SSR, a repo will work better.

[dhavalveera]

Thank you, but that isn't quite what I mean. Please understand that many people are using this successfully with Next.js SSR, including me, so dropping code snippets here isn't likely to be enough for someone to help you.

A minimal example repo is a cloneable GitHub repo that fully demonstrates the issue. Alternatively a codesandbox but since you are specifically reporting a problem on Next.js SSR, a repo will work better.

https://github.com/dhavalveera/Dhaval_Resume

here is the GitHub Repo, but I don't know understand why it's not working at my end, please help me.

[agriffis]

That example is not minimal, it's massive and includes loads of static CSS, Emotion, and other JS. You need to put in the effort to make a minimal reproduction of the issue you're reporting.

[dhavalveera]

That example is not minimal, it's massive and includes loads of static CSS, Emotion, and other JS. You need to put in the effort to make a minimal reproduction of the issue you're reporting.

and I have done this code only to date and found that when I refresh my styled-components code doesn't work, that's why I am asking

[dhavalveera]

That example is not minimal, it's massive and includes loads of static CSS, Emotion, and other JS. You need to put in the effort to make a minimal reproduction of the issue you're reporting.

I am seeking help for this because I am just beginner, don't have any hands-on experience, if possible please help/guide me

[agriffis]

I am seeking help for this because I am just beginner, don't have any hands-on experience, if possible please help/guide me

I think there is just some confusion about the purpose of GitHub issues. This is for reporting bugs in styled-components. It's not really a help forum.

You might want to ask for help in the Discord chat at https://discord.gg/hfGUrbrxaU

Since I've looked at your code, my main suggestion would be to pare it down. You're using a lot of different libraries and approaches in one project. Technically it's possible but you'll spend all your time managing complexity instead of building things. If you want to experiment with things, try https://codesandbox.io where you can work on one thing in isolation. It's a great learning tool. Good luck!