使用 jarallax javascript 库时 Gatsbyjs 构建错误

Question

使用 Gatsby v2。

我想使用 jarallax javascript 库 (https://free.nkdev.info/jarallax/) 以便在我的索引页面上添加一些视差效果。它不是一个反应组件，所以为了避免任何不兼容，我只是将它包装在一个组件中，例如：

import React from "react"
import { jarallax } from "jarallax"

class Jarallax extends React.Component {
  componentDidMount() {
    jarallax(document.querySelectorAll(".jarallax"), { speed: 0.2 })
  }
  componentWillUnmount() {
    jarallax(document.querySelectorAll(".jarallax"), "destroy")
  }
  render() {
    return null
  }
}

export default Jarallax

然后在 IndexPage 中，当我想使用它时，我只需导入组件并像 <Jarallax /> 一样简单地使用它 它可以在开发中使用

我在 Gatsby 文档之后也有这个 gatsby-node.js 文件：

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

现在，如果我尝试运行 gatsby build，我将面临此错误 (https://pastebin.com/CXVaQA5f)，但由于我对反应和 gatsby 还很陌生，所以我不确定下一步该做什么。

Answer 1

我解决了在我的IndexPage 中将<Jarallax /> 替换为{typeof document !== "undefined" && <Jarallax />} 的问题

这对我有帮助：https://github.com/gatsbyjs/gatsby/issues/9038#issuecomment-432548071