Question

我正在尝试结合 Gatsby、React 和 Bootstrap 5 开发一个网站。我找到了一个我喜欢使用的包 react-photo-gallery。我让它在开发中工作得很好。我注意到当我运行 gatsby Build 时这个包导致了一个错误。这是产生的错误；

success Rewriting compilation hashes - 0.014s
success Writing page-data.json files to public directory - 0.002s - 0/0 0.00/s
success Building HTML renderer - 2.063s

 ERROR 

Page data from page-data.json for the failed page "/photos/": {
  "componentChunkName": "component---src-pages-photos-js",
  "path": "/photos/",
  "result": {
    "pageContext": {}
  },
  "staticQueryHashes": []
}

failed Building static HTML for pages - 0.277s

 ERROR #95313 

Building static HTML failed for path "/photos/"

See our docs page for more info on this error: https://gatsby.dev/debug-html





  WebpackError: 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 environment for full errors and add  itional helpful warnings.

  - static-entry.js:286 
    webpack:/the-last-batten/.cache/static-entry.js:286:22


not finished Caching JavaScript and CSS webpack compilation - 2.571s
not finished Caching HTML renderer compilation - 0.305s

如果我点击缩小的反应错误 #130 链接，它会显示；

The full text of the error you just encountered is:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

在继续之前，我无法思考如何解决此问题。我知道它与这个 react-photo-gallery 直接相关，我不知道它是否过时或与某些内容冲突。我在下面提供了我当前的整个版本，希望我能得到一些关于这个错误告诉我什么的指导！谢谢。

github link to my build <<

根据请求更新，Photos.js：

export const photos = [
  {
    src: "https://source.unsplash.com/2ShvY8Lf6l0/800x599",
    width: 4,
    height: 3
  },
  {
    src: "https://source.unsplash.com/Dm-qxdynoEc/800x799",
    width: 1,
    height: 1
  },
  {
    src: "https://source.unsplash.com/qDkso9nvCg0/600x799",
    width: 3,
    height: 4
  },
  {
    src: "https://source.unsplash.com/iecJiKe_RNg/600x799",
    width: 3,
    height: 4
  },
  {
    src: "https://source.unsplash.com/epcsn8Ed8kY/600x799",
    width: 3,
    height: 4
  },
  {
    src: "https://source.unsplash.com/NQSWvyVRIJk/800x599",
    width: 4,
    height: 3
  },
  {
    src: "https://source.unsplash.com/zh7GEuORbUw/600x799",
    width: 3,
    height: 4
  },
  {
    src: "https://source.unsplash.com/PpOHJezOalU/800x599",
    width: 4,
    height: 3
  },
  {
    src: "https://source.unsplash.com/I1ASdgphUH4/800x599",
    width: 4,
    height: 3
  },
  {
    src: "https://source.unsplash.com/XiDA78wAZVw/600x799",
    width: 3,
    height: 4
  },
  {
    src: "https://source.unsplash.com/x8xJpClTvR0/800x599",
    width: 4,
    height: 3
  },
  {
    src: "https://source.unsplash.com/qGQNmBE7mYw/800x599",
    width: 4,
    height: 3
  },
  {
    src: "https://source.unsplash.com/NuO6iTBkHxE/800x599",
    width: 4,
    height: 3
  },
  {
    src: "https://source.unsplash.com/pF1ug8ysTtY/600x400",
    width: 4,
    height: 3
  },
  {
    src: "https://source.unsplash.com/A-fubu9QJxE/800x533",
    width: 4,
    height: 3
  },
  {
    src: "https://source.unsplash.com/5P91SF0zNsI/740x494",
    width: 4,
    height: 3
  }
];

Answer 1

我发现了你的错误（现在链接有效）。您只是在 photos 文件夹下导出 photos.js 对象（在 /pages 中）。

Gatsby bases its routing 使用文件夹结构，因此，当您构建项目时，Gatsby 尝试创建一个 /photos 路由并且它正在查找一个对象（不是 React 组件）并且它失败了。

如果您只是想创建一个对象以在其他地方导入/导出，请将其从 /pages 文件夹中移到其他地方。那应该可以解决您的问题。否则，如果您只是想创建一个 /photos 页面，请创建一个有效的语法。

Gatsby Develop 工作正常，Gatsby Build 导致 WebpackError: Minified React error #130

1 个答案: