Getting ReactServerComponentsError when using tw

[visualcookie]

Hej. I've set up everything exactly the way described in your documentation and how Next.js told me to set up styled-components.

I use the App Router for Next.js as I find this one pretty useful in my use-case. I've used this documentation part to set up styled-components: https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components

Then I used your documentation to set up stailwc but getting an error, when using tw. styling which says the following:

- error ./app/page.tsx
ReactServerComponentsError:

The "use client" directive must be placed before other expressions. Move it to the top of the file to resolve this issue.

   ,-[/home/XXX/Development/XXX/app/page.tsx:1:1]
 1 | 'use client';
   : ^^^^^^^^^^^^^
 2 | 
 3 | import styled from 'styled-components';
   `----

Import path:
  ./app/page.tsx

Right now I'm using an example from the styled-components set up of Next.js, which looks like this:

'use client';

import styled from 'styled-components';

const Container = styled.div`
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem /* 24px */;
`;

const SkeletonInner = styled.div`
  padding: 1rem /* 16px */;
  background-color: rgb(24 24 27 / 0.8);
  border-radius: 1rem /* 16px */;
`;

const SkeletonImg = styled.div`
  height: 3.5rem /* 56px */;
  border-radius: 0.5rem /* 8px */;
  background-color: rgb(63 63 70 / 1);
`;

const SkeletonBtn = styled.div`
  margin-top: 0.75rem /* 12px */;
  width: 25%;
  height: 0.75rem /* 12px */;
  border-radius: 0.5rem /* 8px */;
  background-color: rgb(255 0 128 / 1);
`;

const SkeletonLineOne = styled.div`
  margin-top: 0.75rem /* 12px */;
  height: 0.75rem /* 12px */;
  width: 91.666667%;
  border-radius: 0.5rem /* 8px */;
  background-color: rgb(63 63 70 / 1);
`;

const SkeletonLineTwo = styled.div`
  margin-top: 0.75rem /* 12px */;
  height: 0.75rem /* 12px */;
  width: 66.666667%;
  border-radius: 0.5rem /* 8px */;
  background-color: rgb(63 63 70 / 1);
`;

const Title = tw.h1`text-2xl font-bold`;

const Skeleton = () => (
  <SkeletonInner>
    <SkeletonImg />
    <SkeletonBtn />
    <SkeletonLineOne />
    <SkeletonLineTwo />
  </SkeletonInner>
);

export default function Page() {
  return (
    <div className="space-y-4">
      <Title>Styled with Styled Components</Title>
      <Container>
        <Skeleton />
        <Skeleton />
        <Skeleton />
      </Container>
    </div>
  );
}

What am I doing wrong?

[arlyon]

Hi! Neither emotion nor styled-components support serverside rendered components yet. There is more detail in this discussion #12

In the mean time, if you wish to use emotion or styled-components with nextjs and the app router, please include the 'use client' directive as described in the error :)

I am going to leave this open for now as a tracking issue.