Can't import styled-components server-side | Astro Lounge | Page 1

tawny gyro Apr 18, 2024, 3:38 PM

#

Hi folks, sorry if it has been asked before but I struggle to find the right resource on Google
When rendering a React component that uses Styled Components, I am hitting errors like this "vite_ssr_import_2.default.div is not a function"

This smells like the package is not imported correctly from server during a server render. I hit the exact same issue with Remix which is also based on Vite. Sadly, the current Remix example doesn't say anything about the Vite setup and focuses on setting up server rendering.

Any idea why this would happen ? Do I need to tweak the Vite config somehow?

sour sundial Apr 18, 2024, 4:45 PM

#

I got it!

#

I found this in the docs. https://docs.astro.build/en/guides/styling/#import-a-stylesheet-from-an-npm-package

So i did this in the Astro Config

import { defineConfig } from 'astro/config';

export default defineConfig({
  vite: {
    ssr: {
      noExternal: ['styled-components'],
    }
  }
})

#

https://stackblitz.com/edit/withastro-astro-hp4513

Can see the example here I made

tawny gyro Apr 29, 2024, 4:56 PM

#

oooh ok it gets build as an external package

#

nice one

#

hmm tried in Remix and it just turned "vite_ssr_import_2.default.div is not a function" into "vite_ssr_import_3.default is not a constructor
, still pointing to Styled components

#

though it's funny that you example indded work for Astro

mystic blade Mar 10, 2025, 2:54 PM

#

Hey @tawny gyro @sour sundial , Have you made it work? I have a working version of styled-components in my project and it works well with client:only but the component is not SSR. When I use client:load, the component works in SSR but it will work with vite server only. If I use node adapter, express or any other server integration for production, the styled-component will not append the styles to the HTML. Have you faced this issue?

tawny gyro Mar 10, 2025, 6:16 PM

#

Nope sorry I am long one out of styled components ^^ instead we are just moving to plain SASS progressively

#Can't import styled-components server-side