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'].