如何在 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 的其他部分不可用。你可以learn more about how to debug and workaround this in the official Gatsby documentation here。

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

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