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

时间:2020-09-23 20:07:59

标签: gatsby github-pages p5.js

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

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

1 个答案:

答案 0 :(得分:0)

添加自定义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'
          }
        ]
      }
    });
  }
};