reactjs - GatsbyJS Build – 未定义窗口/未定义模块
问题描述
在尝试构建我的 GatsbyJS 项目时,我遇到了一个相当普遍的问题:
WebpackError: ReferenceError: window is not defined
谷歌搜索时,我发现这是一个相当普遍的问题。所以我开始componentDidMount
要求这样的模块
if (typeof window !== `undefined`) {
const Flickity = require('react-flickity-component');
}
这会导致其他问题
121:13 warning 'Flickity' is assigned a value but never used no-unused-vars
170:12 error 'Flickity' is not defined react/jsx-no-undef
移至其他可用选项,使用 webpack 排除有问题的模块
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /react-flickity-component/,
use: loaders.null(),
},
{
test: /flickity-fullscreen/,
use: loaders.null(),
},
],
},
})
}
}
这也让我头疼
Error: Invariant Violation: Minified React error #130; visit https://reactjs.o rg/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full me ssage or use the non-minified dev environment for full errors and additional h elpful warnings.
- Error
- react-dom-server.node.production.min.js:10 ba
[www]/[react-dom]/cjs/react-dom-server.node.production.min.js :10:312
- react-dom-server.node.production.min.js:11 u
[www]/[react-dom]/cjs/react-dom-server.node.production.min.js :11:166
- react-dom-server.node.production.min.js:39 a.render
[www]/[react-dom]/cjs/react-dom-server.node.production.min.js :39:88
- react-dom-server.node.production.min.js:35 a.read
[www]/[react-dom]/cjs/react-dom-server.node.production.min.js :35:450
- react-dom-server.node.production.min.js:47 renderToString
[www]/[react-dom]/cjs/react-dom-server.node.production.min.js :47:59
- render-page.js:825 Object../.cache/static-entry.js.__webpack_exports__.defau lt
/Users/per.sturesson/WWW/intermission.studio/www/public/rende r-page.js:825:18
- worker.js:35 e
[www]/[gatsby]/dist/utils/worker.js:35:36
- debuggability.js:313 Promise._execute
[www]/[bluebird]/js/release/debuggability.js:313:9
- promise.js:483 Promise._resolveFromExecutor
[www]/[bluebird]/js/release/promise.js:483:18
- promise.js:79 new Promise
[www]/[bluebird]/js/release/promise.js:79:10
- worker.js:31 Promise.map.path
[www]/[gatsby]/dist/utils/worker.js:31:37
- util.js:16 tryCatcher
[www]/[bluebird]/js/release/util.js:16:23
- map.js:61 MappingPromiseArray._promiseFulfilled
[www]/[bluebird]/js/release/map.js:61:38
- promise_array.js:114 MappingPromiseArray.PromiseArray._iterate
[www]/[bluebird]/js/release/promise_array.js:114:31
- promise_array.js:78 MappingPromiseArray.init
[www]/[bluebird]/js/release/promise_array.js:78:10
有什么办法可以解决这一切?如果我从项目中排除模块,它将成功构建。
解决方案
通过将我的 flickity 代码包装在支票中,我成功地在我的 gatsby 项目中构建了 flickity window
。
我不确定这是“正确”还是“正确”,但它确实建立了:
import React, { Component } from 'react'
import Flickity from 'react-flickity-component'
import './flixity.css'
const flickityOptions = {
wrapAround: true,
adaptiveHeight: true,
dragThreshold: 10
}
export default class Carousel extends Component {
render() {
if (typeof window !== 'undefined') {
return (
<div class="container py-3 mb-5">
<Flickity options={flickityOptions}>
<img src="https://via.placeholder.com/800x400?text=Hero1" />
<img src="https://via.placeholder.com/800x400?text=Hero2" />
<img src="https://via.placeholder.com/800x400?text=Hero3" />
<img src="https://via.placeholder.com/800x400?text=Hero4" />
<img src="https://via.placeholder.com/800x400?text=Hero5" />
<img src="https://via.placeholder.com/800x400?text=Hero6" />
</Flickity>
</div>
)
}
return null
}
}
推荐阅读
- php - 在 Laravel 中将整数和日期列更新为空
- javascript - 查找未处理的承诺拒绝的来源:TypeError:检测到承诺的链接循环
- amazon-web-services - CloudFormation - Tansit 网关的路由表路由传播
- ios - Firebase动态链接,如果安装了应用程序,如何将用户引导到应用程序
- shareandcharge - 无法在 OCN 客户端上发布凭据
- apache-kafka - 如何在 Lagom 服务描述符中覆盖 Kafka topicId
- azure-cognitive-search - 如何动态设置 Azure Search 返回的文档大小?
- excel - 从 Excel 导入时缩进任务
- python - 最大和最小字符
- kubernetes - 如何在 Kubernetes 配置中添加 CATALINA_OPTS=-Djava.awt.headless=true 这个属性