сбой при создании статического HTML для страниц — Gatsby и p5js

#gatsby #github-pages #p5.js

#gatsby #github-страницы #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=130amp;args[]=objectamp;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:

Цель добавления пользовательской onCreateWebpackConfig функции — изменить конфигурацию webpack, чтобы избежать переноса некоторой node_modules папки путем добавления 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'
          }
        ]
      }
    });
  }
};