TypeError: __vite_ssr_import_5__.default.div is not a function [fixed]

[leo1104]

I was getting this weird issue when using React + Vite + Styled-Components + SSR + SWC with @swc/plugin-styled-components

This is how my vite config file looks like:

import { defineConfig, splitVendorChunkPlugin } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

// https://vitejs.dev/config/
export default defineConfig({
    esbuild: {
        drop: ['console', 'debugger']
    },
    plugins: [
        react({
            plugins: [['@swc/plugin-styled-components', {
                displayName: true,
                fileName: true,
                ssr: true,
            }]]
        }),
        nodePolyfills(),
        splitVendorChunkPlugin()
    ],
});

Solved this by changing the import statement to: import {styled} from styled-components;