How to solve "window" is not available during server side rendering.

[MrPhyaeSoneThwim]

I am using gatsby-node.js file to configure some legacy packages. The following is my implementation

const webpack = require("webpack")
exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    plugins: [
      new webpack.ProvidePlugin({
        process: "process/browser",
      }),
      new webpack.ProvidePlugin({
        Buffer: [require.resolve("buffer/"), "Buffer"],
      }),
    ],
    resolve: {
      fallback: {
        crypto: require.resolve("crypto-browserify"),
        stream: require.resolve("stream-browserify"),
      },
    },
  })
}

I also connected my project with Gatsby Cloud to deploy automatically when I push code to github. In development, everything worked fine. But when I pushed the code, the build process failed and the following errors raised..

"window" is not available during server side rendering.
See our docs page for more info on this error: https://gatsby.dev/debug-html

  408 |     }
  409 | }
> 410 | window.memoryStorage = window.memoryStorage || new MemoryStorage();
      | ^
  411 | var MemoryStorage$1 = window.memoryStorage;
  412 |
  413 | const isSupported = () => {

  WebpackError: ReferenceError: window is not defined

[herecydev]

There's no window on the server (when you're server side rendering). Where is that stacktrace from?

[shobz]

Create a hook and import it..
export const isBrowser = () => typeof window !== "undefined"

or just add this code inside your JS file

export const isBrowser = () => typeof window !== "undefined"
const MyComponent = ( ) => {
.....
Your code here
}
export default MyComponent 

to use try

isBrowser() && window.memoryStorage = window.memoryStorage || new MemoryStorage();