如何解决WebpackError:ReferenceError:窗口未在Gatsby上定义
我已经在互联网上进行了出色的搜索,无法解决此问题。
我正在使用Gasby开发静态页面,并且遇到此错误:
WebpackError: ReferenceError: window is not defined
我的线索是,这与我使用的bootsrap / Modal模块有关。但是我已经清理了所有index.js并在尝试构建它时仍然出现错误。
//index.js
import React from 'react'
const IndexPage = () => (
<div>
</div>
)
export default IndexPage
有人知道我该如何解决吗?谢谢!
Ps:我已经尝试在componentDidMount上导入引导程序模块,也尝试设置gatsby-node.js,并且还尝试导入具有可加载组件的引导程序模块。
Edit1:来自gatsby-config.js的插件部分
plugins: [
`gatsby-plugin-react-helmet`,{
resolve: `gatsby-source-filesystem`,options: {
name: `images`,path: `${__dirname}/src/images`,},`gatsby-transformer-sharp`,`gatsby-plugin-sharp`,{
resolve: `gatsby-plugin-manifest`,options: {
name: `ayo`,short_name: `ayo`,start_url: `/`,background_color: `#fff`,theme_color: `#20336C`,display: `minimal-ui`,icon: `src/images/icon.png`,// This path is relative to the root of the site.
},// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more,visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
解决方法
使用第三方依赖项(例如您的Bootstrap模态)时,您访问window
对象的能力会消失。在这种情况下,您必须为该模块的webpack配置添加null
加载程序。
在您的gatsby-node.js
中:
exports.onCreateWebpackConfig = ({ stage,loaders,actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /bad-module/,use: loaders.null(),},],})
}
}
在上面的代码中,您必须将/bad-module/
的{{1}}替换为要避免进行转换的node_modules
中的依赖项文件夹。基本上,在服务器渲染期间,要用虚拟模块替换有问题的模块,因为它是正则表达式,所以必须将模块名称与文件夹匹配。
您可以在Gatsby's documentation about debugging HTML builds中查看更多信息。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。