[英]WebpackError: ReferenceError: window is not defined on Gatsby
I've already made a great search on the internet and couldn't solve this problem.我已经在互联网上进行了大量搜索,但无法解决这个问题。
I'm using Gasby to develop a static page and I'm facing this error:我正在使用 Gasby 开发 static 页面,但我遇到了这个错误:
WebpackError: ReferenceError: window is not defined
My clue is that, this has to do with bootsrap/Modal module i'm using.我的线索是,这与我正在使用的 bootsrap/Modal 模块有关。 But i've cleaned all my index.js and still getting the error when i try to build it.
但是我已经清理了我所有的 index.js 并且当我尝试构建它时仍然得到错误。
//index.js
import React from 'react'
const IndexPage = () => (
<div>
</div>
)
export default IndexPage
Does someone have an idea of how can I solve it?有人知道我该如何解决吗? Thanks!
谢谢!
Ps: I've already tried to import the bootstrap module on componentDidMount, i've also tried to set the gatsby-node.js and I also tried to import the bootstrap module with loadable-components. Ps:我已经尝试在componentDidMount上导入引导模块,我也尝试设置gatsby-node.js,我还尝试使用可加载组件导入引导模块。
Edit1: Plugins portions from gatsby-config.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`,
], ],
When using third-party dependencies (such as your Bootstrap modal) your capability to access to window
object disappears.当使用第三方依赖项(例如您的引导模式)时,您访问
window
object 的能力将消失。 In that case, you have to add a null
loader to your webpack's configuration for this module.在这种情况下,您必须将
null
加载程序添加到该模块的 webpack 配置中。
In your gatsby-node.js
:在您的
gatsby-node.js
:
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /bad-module/,
use: loaders.null(),
},
],
},
})
}
}
In the code above, you have to replace /bad-module/
for your dependency folder in node_modules
that you want to avoid to transpile.在上面的代码中,您必须将
/bad-module/
替换为您想要避免转换的node_modules
中的依赖文件夹。 Basically, you are replacing the offending module with a dummy module during server rendering, since it's a regular expression, you have to match your module name with the folder.基本上,您在服务器渲染期间用一个虚拟模块替换有问题的模块,因为它是一个正则表达式,您必须将您的模块名称与文件夹匹配。
You can check for further information in Gatsby's documentation about debugging HTML builds .您可以在Gatsby 的文档中查看有关调试 HTML 构建的更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.