ERROR MESSAGE:
Server Error TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
import Link from "next/link";
import StyledHero from "./Hero.style";
const Hero = () => {
return (
<StyledHero>
<h1>Stowarzyszenie Juz Lepiej</h1>
<h2>Przybywam w celu:</h2>
<Link about="Panel wolontariusza" href={"/volunteer"}>Uzyskania pomocy</Link>
<Link about="Panel podopiecznego" href={"/mentee"}>Niesienia pomocy</Link>
</StyledHero>
)
};
export default Hero;
import styled from "styled-components";
const StyledHero = styled.main`
width: 100%;
height: auto;
padding: 10em;
`
export default StyledHero;
When using Styled Component I'm getting the error. How can I use StyledComponents with SSR in Next13? Any solutions I found don't work. But when I change <StyledHero>
to <main></main>
then it works without a problem.
I try use in .babelrc:
{
"presets": [
"next/babel"
],
"plugins": [
[
"styled-components",
{
"ssr": true,
"displayName": true,
"preprocess": false
}
]
]
}
My package.json:
{
"name": "mentalhealthcharity",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@next/font": "13.2.4",
"@types/node": "18.15.11",
"@types/react": "18.0.31",
"@types/react-dom": "18.0.11",
"@types/styled-components": "^5.1.26",
"eslint": "8.37.0",
"eslint-config-next": "13.2.4",
"next": "13.2.4",
"react": "18.2.0",
"react-dom": "18.2.0",
"styled-components": "^5.3.9",
"typescript": "5.0.2",
"zustand": "^4.3.6"
},
"devDependencies": {
"babel-plugin-styled-components": "^2.0.7"
}
}
Add the
use client
directive to the top of the file with your styled components.Reference: https://github.com/styled-components/styled-components/issues/3856#issuecomment-1304740381