NextJS with styled-components fast refresh not working

Question

I have a NextJS app being used with styled-components.

I have these 3 files: Worth noting that some markups are removed for clarity sake so only the related codes are pasted.

Header.js

import {
   HeaderContainer, 
   SearchInput,
   SearchWrapper
} from './HeaderStyles';
import { Input } from '../GlobalComponents/GlobalComponents';


const Header = () => {
   return (
      <HeaderContainer>
         <SearchWrapper>
            <SearchInput type='text' placeholder='Search movie' />
         </SearchWrapper>
      </HeaderContainer>
   );
}
 
export default Header;

HeaderStyles.js

import styled from 'styled-components';
import { Input } from '../GlobalComponents/GlobalComponents';

export const HeaderContainer = styled.header`
   background-color: ${props => props.theme.colors.primary};
   display: flex;
   align-items: center;
   box-sizing: border-box;
`;

export const SearchWrapper = styled.div`
   flex-grow: 3;
   background-color: red;
`;

export const SearchInput = styled(Input)`
   background-color: yellowgreen;
`;

GlobalComponents.js

import styled from "styled-components";

export const Input = styled.input`
   padding: 1rem;
`;

Attached is my Project Structure

Note that inside HeaderStyles.js, the SearchInput is extended from Input in GlobalComponents.js Whenever I change css properties in HeaderStyles.js, the fast refresh works just fine. However, in the case of GlobalComponents.js, I had to manually reload the page to view the changes.

If I were to put my generic Input styling into HeaderStyles, it works fine, but that isn't how I wanted to structure it. So I guess it somewhat related to the imported modules not being in the React tree or stuff like that.

I have been looking for solutions online but got no luck. Would like to know the causes and solution for this. Thanks in adv.

score 2 · Answer 1 · answered Feb 24 '22 at 14:12

2

I think your problem about styled-component at SSR.

You can try change your pages/_document.js and your babel config.

add this codes to .babelrc

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

_document.js

https://github.com/vercel/next.js/blob/main/examples/with-styled-components/pages/_document.js

answered Feb 24 '22 at 14:12

BIRKAN

81
4

1

I have both of _document.js and .babelrc setup correctly. It was done exactly like the one u mentioned. – Wilson Feb 24 '22 at 14:22
I think you can update your nextjs version to lates. In new version have a styled-component support. https://nextjs.org/docs/advanced-features/compiler#styled-components – BIRKAN Feb 24 '22 at 14:31
1

I previously used the `npx create-next-app@latest` command to create next app so I believe this is the newest version. I've updated the `next.config.js` file as shown in the nextjs docs but the fast reload is still not working. – Wilson Feb 24 '22 at 14:45

score 1 · Answer 2 · answered Nov 21 '22 at 18:59

1

with the Next Complier on new version of next, you should only update your next.config file and _document file, and you will be all set. Babel will cause conflict with the NextJS compiler.

https://github.com/vercel/next.js/tree/canary/examples/with-styled-components

answered Nov 21 '22 at 18:59

Valeria Daffarra

21
3

changing my _document.tsx to the one they had in that link fixed my problem. – user1189352 Dec 19 '22 at 20:54

score 0 · Answer 3 · answered Dec 17 '22 at 12:08

0

Make sure you have pages/_document.js with codes stated here.

answered Dec 17 '22 at 12:08

Abhishek Prajapati

76
5

score 0 · Answer 4 · answered May 20 '23 at 13:11

I had the same issue.

First you have to install this package:

npm install --save-dev babel-plugin-styled-components

Then you create a file in the root of your project directory, by the name of "babel.config.js" In this file you will include the following:

module.exports = {
  presets: ["next/babel"],
  plugins: [["styled-components", { ssr: true }]]
};

NextJS with styled-components fast refresh not working

4 Answers4