avoid "windows is undefined" error when in node for React component

solution1.js

import React, { Component } from "react"

import styles from "./index.css"

export default class Hero extends Component {

  componentDidMount() {
    if (typeof window !== "undefined") {
      require("particles.js").particlesJS.load("particles-js", "assets/particles.json", function() {
        console.log("callback - particles.js config loaded")
      })
    }
  }

  render() {
    return (
      <div id="particles-js" className={ styles.container }>
        <header className={ styles.header }>
          { "Scale Conf" }
        </header>
      </div>
    )
  }

solution2.js

mport React, { Component } from "react"

let particles
if (typeof window !== "undefined") {
  particles = require("particles.js")
}

import styles from "./index.css"

export default class Hero extends Component {

  componentDidMount() {
    particles && .particlesJS.load("particles-js", "assets/particles.json", function() {
      console.log("callback - particles.js config loaded")
    })
  }

  render() {
    return (
      <div id="particles-js" className={ styles.container }>
        <header className={ styles.header }>
          { "Scale Conf" }
        </header>
      </div>
    )
  }