如何与Gatsby/React一起使用lightgallery

Question

我正试图使用名为"lightgallery"的jQuery插件与Gatsby/React一起构建一个图像库。我设法弄清楚了如何让它在开发中发挥作用。然而，当我试图建立网站时，我遇到了一个问题。这是我的组件代码

import React, { Component } from 'react'
import Content from '../components/content-container/content'
import $ from 'jquery'
import 'lightgallery'
import 'lg-video'
import 'lg-zoom'
import img_1 from '../images/assets/1.jpg'
import img_2 from '../images/assets/2.jpg'
import img_3 from '../images/assets/3.jpg'
import './gallery.sass'
class Gallery extends Component {
onLightGallery = node => {
this.lightGallery = node
$(node).lightGallery()
}
componentWillUnmount() {
$(this.lightGallery)
.data('lightGallery')
.destroy(true)
}
render() {
return (
<Content>
<Hero heroImage="hero hero-img-gallery">
<h1 className="hero-title">Gallery</h1>
</Hero>
<div className="wrapper">
<p className="title-gallery">Project video</p>
<div className="lightgallery" ref={this.onLightGallery}>
<figure href={img_1}>
<img src={img_1} alt="moxon" />
<figcaption>text</figcaption>
<Play />
</figure>
<figure href={img_2}>
<img src={img_2} alt="thumbnail" />
<figcaption>text</figcaption>
</figure>
<figure href={img_3}>
<img src={img_3} alt="thumbnail" />
<figcaption>text</figcaption>
</figure>
</div>
<p className="title-gallery">images</p>
<div className="lightgallery" ref={this.onLightGallery}>
<figure href={img_1}>
<img src={img_1} alt="thumbnail" />
<figcaption>text</figcaption>
</figure>
<figure href={img_2}>
<img src={img_2} alt="thumbnail" />
<figcaption>text</figcaption>
</figure>
</div>
</div>
</Content>
)
}
}
export default Gallery

一切都在开发中运行，然而，当我尝试"gatsby-build"时，它会给我带来以下错误：

1340 |     };
1341 |
> 1342 |     $.fn.lightGallery = function(options) {
| ^
1343 |         return this.each(function() {
1344 |             if (!$.data(this, 'lightGallery')) {
1345 |                 $.data(this, 'lightGallery', new Plugin(this, options));

WebpackError: TypeError: Cannot set property 'lightGallery' of undefined
- lightgallery.js:1342
[lib]/[lightgallery]/dist/js/lightgallery.js:1342:1
- lightgallery.js:1358
[lib]/[lightgallery]/dist/js/lightgallery.js:1358:2
- lightgallery.js:8 Object.<anonymous>
[lib]/[lightgallery]/dist/js/lightgallery.js:8:1
- lightgallery.js:9 ./node_modules/lightgallery/dist/js/lightgallery.js
[lib]/[lightgallery]/dist/js/lightgallery.js:9:6
- lightgallery.js:18 Object../node_modules/lightgallery/dist/js/lightgallery.js
[lib]/[lightgallery]/dist/js/lightgallery.js:18:2
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1

- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- sync-requires.js:10 Object../.cache/sync-requires.js
lib/.cache/sync-requires.js:10:53
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- static-entry.js:9 Module../.cache/static-entry.js
lib/.cache/static-entry.js:9:22
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- bootstrap:83
lib/webpack/bootstrap:83:1

- universalModuleDefinition:3 webpackUniversalModuleDefinition
lib/webpack/universalModuleDefinition:3:1
- universalModuleDefinition:10 Object.<anonymous>
lib/webpack/universalModuleDefinition:10:2

我不知道出了什么问题，也不知道如何解决这个问题，因为我是gatsby/react和webpack的新手。任何建议都将不胜感激！

Answer 1

您遇到这个问题是因为lightgallery代码是在window和DOM的其他部分不可用的服务器上运行的。您可以在Gatsby官方文档中了解更多关于如何调试和解决此问题的信息。

该资源建议以下内容将第三方库排除在服务器端评估之外：

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /bad-module/,
use: loaders.null(),
},
],
},
})
}
}