styled-components: ReferenceError: window is not defined - NextJs 10.1.2

Environment

System:

  • OS: Linux 4.19 Ubuntu 18.04.5 LTS (Bionic Beaver)
  • CPU: (8) x64 Intel® Core™ i7-9700K CPU @ 3.60GHz
  • Memory: 21.27 GB / 25.01 GB
  • Container: Yes
  • Shell: 5.4.2 - /usr/bin/zsh

Binaries:

  • Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
  • Yarn: 1.22.5 - /usr/bin/yarn
  • npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm

npmPackages:

  • babel-plugin-styled-components: ^1.12.0 => 1.12.0
  • styled-components: ^5.2.2 => 5.2.2

Steps to reproduce

  1. Using NextJS 10.1.2 with the future flag for Webpack 5 enabled. EDIT: same error occurs even with this flag removed.
module.exports = {
  future: {
    webpack5: true,
    strictPostcssConfiguration: true,
  }
};
  1. Running npm dev or npm build results in the below error:
ReferenceError: window is not defined
    at k (/home/wade/Code/Clients/rhythm-marketing/node_modules/styled-components/dist/styled-components.cjs.js:1:7161)
    at e.getStyleElement (/home/wade/Code/Clients/rhythm-marketing/node_modules/styled-components/dist/styled-components.cjs.js:1:22622)
    at Function.getInitialProps (/home/wade/Code/Clients/rhythm-marketing/.next/server/pages/_document.js:1148:49)
    at async loadGetInitialProps (/home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/next-server/lib/utils.js:5:91)
    at async renderToHTML (/home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/next-server/server/render.js:54:1110)
    at async /home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/next-server/server/next-server.js:112:97
    at async /home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/next-server/server/next-server.js:105:142
    at async DevServer.renderToHTMLWithComponents (/home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/next-server/server/next-server.js:137:387)
    at async DevServer.renderErrorToHTML (/home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/next-server/server/next-server.js:139:505)
    at async DevServer.renderErrorToHTML (/home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/server/next-dev-server.js:35:1380)
    at async DevServer.renderToHTML (/home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/next-server/server/next-server.js:138:1281)
    at async DevServer.renderToHTML (/home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/server/next-dev-server.js:35:578)
    at async DevServer.render (/home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/next-server/server/next-server.js:75:236)
    at async Object.fn (/home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/next-server/server/next-server.js:59:580)
    at async Router.execute (/home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/next-server/server/router.js:25:67)
    at async DevServer.run (/home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/next-server/server/next-server.js:69:1042)
ReferenceError: window is not defined
    at k (/home/wade/Code/Clients/rhythm-marketing/node_modules/styled-components/dist/styled-components.cjs.js:1:7161)
    at e.getStyleElement (/home/wade/Code/Clients/rhythm-marketing/node_modules/styled-components/dist/styled-components.cjs.js:1:22622)
    at Function.getInitialProps (/home/wade/Code/Clients/rhythm-marketing/.next/server/pages/_document.js:1148:49)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
    at async loadGetInitialProps (/home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/next-server/lib/utils.js:5:91)
    at async renderToHTML (/home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/next-server/server/render.js:54:1110)
    at async /home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/next-server/server/next-server.js:112:97
    at async __wrapper (/home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/lib/coalesced-function.js:1:330)
    at async DevServer.renderToHTMLWithComponents (/home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/next-server/server/next-server.js:137:387)
    at async DevServer.renderToHTML (/home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/next-server/server/next-server.js:138:522)
    at async DevServer.renderToHTML (/home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/server/next-dev-server.js:35:578)
    at async DevServer.render (/home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/next-server/server/next-server.js:75:236)
    at async Object.fn (/home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/next-server/server/next-server.js:59:580)
    at async Router.execute (/home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/next-server/server/router.js:25:67)
    at async DevServer.run (/home/wade/Code/Clients/rhythm-marketing/node_modules/next/dist/next-server/server/next-server.js:69:1042)

Expected Behavior

This error does not occur with styled-components: ^5.2.1

Actual Behavior

The above error occurs and I am unable to build my project.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 77
  • Comments: 21 (1 by maintainers)

Commits related to this issue

Most upvoted comments

Same issue here, Next 10.0.9 without the Webpack 5 flag. Appears to be caused by #3415.

+23
maxproske on Mar 30, 2021

Fix is out in 5.2.3

+16
quantizor on Mar 31, 2021

v5.2.1 with next 10.1.2 works for me. Why did a minor release break things?

+13
ujwal-setlur on Mar 30, 2021

The error does occur when using styled-components: ^5.2.1 (which is atm being resolved to 5.2.2 in when using yarn without a lockfile)

+7
rafifos on Mar 30, 2021

npm uninstall styled-components npm install styled-components@5.2.0 Did the trick for me.

+6
mohito12 on Mar 31, 2021

I had the same problem when generating the build in NextJS in version 10.0.7 with styled-components in version “^ 5.2.1”. The solution was to remove styled-components and reinstalled, fixing it in version 5.2.0.

yarn remove styled-components yarn add styled-components@5.2.0

+6
FabricioPaschoal on Mar 31, 2021

Server side rendering in general is busted on 5.2.2. We have rolled back to 5.2.1 and the issue is resolved.

If it helps, this was the stack trace:

ERROR Master [Anonymous] ReferenceError: window is not defined
    at id (/mnt/g/app/node_modules/styled-components/src/constants.js:4:33)
    at e.id [as _emitSheetCSS] (/mnt/g/app/node_modules/styled-components/src/models/GlobalStyle.js:28:11)
    at e.getStyleTags (/mnt/g/app/node_modules/styled-components/src/models/GlobalStyle.js:28:11)
+5
tony99nyr on Mar 30, 2021

Hi, I’m using this nextjs styled-components example. I also confirm the bug with styled-components@5.2.2 and installing styled-components@5.2.1 doesn’t have the bug.

+2
inside on Mar 31, 2021

This was also happening on Gatsby build on Netlify, fixed by rolling back to version 5.2.1

This was the stack trace, hope this helps!

failed Building static HTML for pages - 9.641s error "window" is not available during server side rendering. > 1 | import{typeOf as e,isElement as t,isValidElementType as n}from"react-is";import r,{useState as

+2
Rouncer27 on Mar 30, 2021

I can’t see how I should do this, as styled-components is a dependency of redoc-cli. I raised an issue over there as well.

+1
pierot on Mar 31, 2021

Having the same issue here.

+1
mikevercoelen on Mar 31, 2021
Read more comments on GitHub
← styled-components: React.StrictMode throws warning because of `findDOMNode` use
styled-components: Server Side Rendering: First paint missing some styles (FOUC) →