Having error with gatsby-plugin-styled-components and gatsby v3

[hrahimi270]

Hi folks.
I just started using Gatsby v3 today. So, I copied one of my projects that were built with Gatsby v2 and upgraded the packages to the latest version (mostly gatsby-related packages).
But I had some errors and problems that are normal when migrating to a new version (:

One thing that I wasn't able to fix, was an error from gatsby-plugin-styled-components.
It only shows up in the building process, but if I enable the DEV_SSR flag, it interrupts the dev server too.

failed Building static HTML for pages - 0.242s

 ERROR #95312 

"window" is not available during server side rendering.

See our docs page for more info on this error: https://gatsby.dev/debug-html

.
.
// lots of code printed here (: 
.
.

  2 | //# sourceMappingURL=styled-components.esm.js.map
  3 |


  WebpackError: ReferenceError: window is not defined (from plugin: gatsby-plugin-styled-components)
  
  - styled-components.esm.js:1 
    [fajre-safa-website]/[styled-components]/dist/styled-components.esm.js:1:7172
  
  - styled-components.esm.js:1 
    [fajre-safa-website]/[styled-components]/dist/styled-components.esm.js:1:24405
  
  - gatsby-ssr.js:27 
    [fajre-safa-website]/[gatsby-plugin-styled-components]/gatsby-ssr.js:27:30
  
  - api-runner-ssr.js:45 
    fajre-safa-website/.cache/api-runner-ssr.js:45:41

And this is my gatsby info result:

System:
    OS: macOS 10.15.4
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.18.4 - ~/.nvm/versions/node/v12.18.4/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.14.6 - ~/.nvm/versions/node/v12.18.4/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 89.0.4389.114
    Firefox: 85.0.2
    Safari: 13.1
  npmPackages:
    gatsby: ^3.2.0 => 3.2.0
    gatsby-image: ^3.2.0 => 3.2.0
    gatsby-plugin-google-analytics: ^3.2.0 => 3.2.0
    gatsby-plugin-i18n: ^1.0.1 => 1.0.1
    gatsby-plugin-manifest: ^3.2.0 => 3.2.0
    gatsby-plugin-offline: ^4.2.0 => 4.2.0
    gatsby-plugin-react-helmet: ^4.2.0 => 4.2.0
    gatsby-plugin-react-svg: ^3.0.0 => 3.0.0
    gatsby-plugin-sharp: ^3.2.0 => 3.2.0
    gatsby-plugin-styled-components: ^4.2.0 => 4.2.0
    gatsby-plugin-tawk: ^1.0.0 => 1.0.0
    gatsby-plugin-typography: ^3.2.0 => 3.2.0
    gatsby-source-filesystem: ^3.2.0 => 3.2.0
    gatsby-source-graphql: ^3.0.0 => 3.2.0
    gatsby-transformer-sharp: ^3.2.0 => 3.2.0

Can anyone help me fix that?

Thanks.

[renrez]

Also experiencing this issue