createGlobalStyle not working version >= 5.3.1

[favger]

I've initiated a new project utilizing Vite, React, and Typescript, and I've opted for styled-components for UI development. However, I'm encountering difficulties in running createGlobalStyle. Interestingly, when I downgrade styled-components to version 5.3.0, the issue resolves, but ideally, I'd prefer to utilize the latest version of the library.

My Package.json:

	"dependencies": {
	        ...
		"react": "^18.2.0",
		"react-dom": "^18.2.0",
		"styled-components": "^6.8.1"
	},
	"devDependencies": {
	        ...
		"typescript": "^5.2.2",
		"vite": "^5.0.8"
	}

Has anyone else experienced this problem, and are there any known resolutions or workarounds available?

[favger]

I understand the issue. In vite.config.ts, resolve.MainFields is set by default to ['browser', 'module', 'jsnext:main', 'jsnext'], but it seems it's not working because I left it as an empty array. This means styled-components determines whether it runs in the browser or on the server from here.

To enable createGlobalStyle to work, you can either remove mainFields or set it to ['browser', 'module', 'jsnext:main', 'jsnext'].