Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

createGlobalStyle does not work with next.js 7 when deployed to now

See original GitHub issue

Environment

## System:
 - OS: macOS 10.14.1
 - CPU: x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
 - Memory: 125.21 MB / 16.00 GB
 - Shell: 3.2.57 - /bin/bash
## Binaries:
 - Node: 10.6.0 - /usr/local/bin/node
 - Yarn: 1.3.2 - /usr/local/bin/yarn
 - npm: 6.1.0 - /usr/local/bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman
## npmPackages:
 - babel-plugin-styled-components: ^1.8.0 => 1.8.0
 - styled-components: ^4.0.2 => 4.0.2

Reproduction

This appears to be a problem with deploying a project using next.js v7 + styled-components v4, when the createGlobalStyle is used in the _document.js file.

Steps to reproduce

Clone https://github.com/specfm/spec-next/tree/sc-4
Checkout sc-4 branch
deploy with now

Expected Behavior

The normalize.js file which contains the createGlobalStyle should be injected into the <head> of the document to provide global css reset styles.

Actual Behavior

The createGlobalStyle does not inject the global css into the <head> when deployed with now - about 1/10 of my deploys has it randomly work, but most deploys will look like this:

Expected design is at spec.fm - the deploy live right now had to be built with styled-components@3.x

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:10 (4 by maintainers)

Top GitHub Comments

4reactions

jetarin-mincommented, Oct 25, 2018

I also have this problem when using createGlobalStyle with nextjs v.7, and it happens only for the first request of built version of my project.(dev seems to be ok). I use express as a customized server for dynamic route of nextjs.

3reactions

probablyupcommented, Oct 22, 2018

I believe global styles need to go in _app.js or individual pages.

On Mon, Oct 22, 2018, 1:32 AM Brian Lovin notifications@github.com wrote:

@mxstbr https://github.com/mxstbr mentioned that this may be an issue of using createGlobalStyle in _document.js - to check, https://spec-next-fczfxpocww.now.sh/ works when deployed where createGlobalStyle is imported into _app.js

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/styled-components/styled-components/issues/2134#issuecomment-431750662, or mute the thread https://github.com/notifications/unsubscribe-auth/AAiy1uxIklBCrGRr0ipoh1GOreEnLWGDks5unWaPgaJpZM4Xy49A .