Gatsby 引入weixin-js-sdk window is defined error 修复

在gatsby中引入weixin-js-sdk的时候会报错 window is defined

为了解决这个问题，需要在将引入weixin-js-sdk从通常的

import wx from 'weixin-js-sdk';

改为

// index.js
import React from "react";
import Link from "gatsby-link";

// import "uikit/dist/js/uikit";
// Third party JS access `window` without
// `typeof window !== "undefined"` check

class Template extends React.Component {
  componentDidMount() {
    import("uikit/dist/js/uikit")
      .then((uikit) => {
        this.uikit = uikit;
      })
      .catch((error) => console.error(error));
  }
  render() {
    // ...
  }
}

• 原因
  Gatsby是一个react 的Ssr框架，所以首页是在服务端渲染的，而服务端是没有window对象的，所以就会报错 window is defined error.

除了上面的这种解决方案，还有一种解决方案

在引用window对象的时候，这么写

// Wrap the require in check for window
if (typeof window !== `undefined`) {
  const module = require("module")
}

或者这么写

const module = typeof window !== `undefined` ? require("module") : null

这种方案只针对，你能控制代码的情况下，比如代码是你自己写的，如果是像weixin sdk这种第三方的代码，你没有办法更改，就只能使用第一种方法。