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

如何解决为页面构建静态HTML失败-Gatsby和p5js

站点：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} />
}

关于可能是什么问题的任何想法？

解决方法

添加自定义onCreateWebpackConfig函数的目的是通过添加node_modules加载程序来修改webpack的配置，以避免某些null文件夹的转译，因此测试名称必须与（ （是一个正则表达式）到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'
          }
        ]
      }
    });
  }
};