reactjs - 使用 jarallax javascript 库时 Gatsbyjs 构建错误

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-node.js文件遵循 Gatsby 文档:

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 )，但由于我对 react 和 Gatsby 还很陌生，所以现在不太确定下一步是什么。

Answer 1

我解决了这个问题，替换 <Jarallax />对于 {typeof document !== "undefined" && <Jarallax />}在我的IndexPage

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