Next.js Discord

Discord Forum

Next 13 with styled-components problem

Unanswered
Chartreux posted this in #help-forum
Open in Discord
ChartreuxOP
Hello,

I have Next 13 application splitted in two git repositories. First is public project with NexJS 13 and second should be standalone UI library with storrybook but depends on Next (as i need Link and Image components).

For styling I'm using styled-components.

Styled-components integration is working in public project without any problem. I followed documentation and It works. But when I build UI libary na install it to project as an dependency and when I import let's say Icon UI component I'm getting following error

ThemeProvider: Please make sure your useTheme hook is within a `<ThemeProvider>`

The Icon component uses the useTheme() hook inside...

In Next project I have ThemeProvider properly placed in code.. i think for some reason components installed as a library doesn't see provider in NextJS code. I'm using App Router and providers are placed in page.tsx which is server component...

What can cause that issue?

Thank you for the help.

4 Replies

Black carp
Hey, it may be because the ThemeProvider requires use of hooks, that are a “Client thing” let’s say, and your page.tsx is a Server Component. You would need to wrap your ThemeProvider in a Client Component and then use it in you Server Component.
ChartreuxOP
problem was that we are using another package, which depends on styled-components but it has not tham as peerDependency so maybe bundler was confused which styled-components to use so I need to configure it in next.config.js like

webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'styled-components': path.resolve('./node_modules/styled-components'),
    };
    return config;
  },
now it is working... but I hope o didnt opt out SWC compiler with this. .I'm not sure