Question

使用Gatsby v2。

我想使用jarallax javascript库（https://free.nkdev.info/jarallax/）来在我的索引页面上添加一些视差效果。它不是React组件，因此为了避免任何不兼容，我将其包装在一个组件中，例如：

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

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

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

使用jarallax JavaScript库时Gatsbyjs构建错误

1 个答案: