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;