CODEWITHSUNDEEP
reactjsbuildgatsby
Jeremy Ell
Jeremy Ell

Reputation: 31

Gatsby Develop works fine, Gatsby Build causes WebpackError: Minified React error #130

I'm trying to develop a website with Gatsby, React and Bootstrap 5 combined. I found a package react-photo-gallery that I like to use. I got it working perfectly fine under develop. I noticed that this package is causing an error when I run gatsby Build. This is the error produced;

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

If I click on the minified react error #130 link, it shows;

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.

I can't wrap my mind around how to resolve this issue before continuing. I know it is directly related to this react-photo-gallery, I don't know if it's outdated or conflicting with something. I provided my whole current build below, hopefully, I can get some guidance on what this error is telling me! Thank you.

github link to my build <<

update, Photos.js as per request:

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
  }
];

Upvotes: 3

Views: 1719

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29320

I've spotted your mistake (now the link works). You are just exporting a photos object (in photos.js) under /pages folder.

Gatsby bases its routing using the folder structure so, when you build the project, Gatsby tries to create a /photos route and it's finding an object (not a React component) and it fails.

If you are just trying to create an object to import/export somewhere else, move it from /pages folder and place it somewhere else. That should fix your issue. Otherwise, if you are just trying to create a /photos page, create a valid syntax.

Upvotes: 0

Related Questions