在gatsby中引入weixin-js-sdk的時(shí)候會(huì)報(bào)錯(cuò) window is defined
為了解決這個(gè)問(wèn)題，需要在將引入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是一個(gè)react 的Ssr框架，所以首頁(yè)是在服務(wù)端渲染的，而服務(wù)端是沒(méi)有window對(duì)象的，所以就會(huì)報(bào)錯(cuò)window is definederror.
除了上面的這種解決方案野瘦，還有一種解決方案
在引用window對(duì)象的時(shí)候，這么寫(xiě)
// Wrap the require in check for window
if (typeof window !== `undefined`) {
const module = require("module")
}
或者這么寫(xiě)
const module = typeof window !== `undefined` ? require("module") : null
這種方案只針對(duì)，你能控制代碼的情況下忘嫉，比如代碼是你自己寫(xiě)的，如果是像weixin sdk這種第三方的代碼案腺，你沒(méi)有辦法更改庆冕，就只能使用第一種方法。
