在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 definederror.
除了上面的这种解决方案，还有一种解决方案
在引用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这种第三方的代码，你没有办法更改，就只能使用第一种方法。
