为页面构建静态 HTML 失败 - Gatsby 和 p5js

Question

站点：https://github.com/GiorgioMartini/thisisgiorgioweb

部署到 github 页面时出现此错误：

failed Building static HTML for pages

我正在使用 "react-p5": "^1.3.6"

在我遇到错误之前：window is not defined 所以他们建议我添加这个

gatsby-node.js

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === 'build-html' || stage === 'develop-html') {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /p5/,
            use: 'null-loader'
          }
        ]
      }
    });
  }
};

但现在我收到错误：failed Building static HTML for page 及以下：

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environmen t for full errors and additional helpful warnings.

我的素描作为背景一索引：


const Background = (props) => {
  ...
  const windowResized = (p5) => p5.resizeCanvas(p5.windowWidth, p5.windowHeight)
  ...

  const setup = (p5, canvasParentRef) => {
    canvas = p5.createCanvas(p5.windowWidth, p5.windowHeight).parent(canvasParentRef)
    const colWidth = (p5.width / cols)
    const colHeight = (p5.height / rows)
    canvas.position(0, 0)
    canvas.style('z-index', '-1')
    p5.background(0);
    for (let x = 0; x < cols+1; x++) {
      for (let y = 0; y < rows+1; y++) {
        spots.push(Spot(p5, x * colWidth, y * colHeight))
      }
    }
  }

  const draw = (p5) => {
    p5.background(0)
    ...
    })

  };
  return <Sketch windowResized={windowResized} setup={setup} draw={draw} />
}

知道可能是什么问题吗？

Answer 1

添加自定义 onCreateWebpackConfig 函数的目的是通过添加 null 加载器来修改 webpack 的配置以避免某些 node_modules 文件夹的转译，因此测试名称必须匹配（这是一个正则表达式）到 node_modules 内的文件夹。在你的情况下，应该是 react-p5 而不是 p5.

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === 'build-html' || stage === 'develop-html') {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-p5/,
            use: 'null-loader'
          }
        ]
      }
    });
  }
};

为页面构建静态 HTML 失败 - Gatsby 和 p5js

failed Building static HTML for pages - Gatsby and p5js

github-pages

p5.js

gatsby