TypeError: Cannot read properties of undefined (reading 'width')

[amcc]

current package versions "gatsby": "^5.3.3", "gatsby-transformer-cloudinary": "^4.3.0", "gatsby-plugin-image": "^3.3.2",

---

In a previous version of this module there was a setting cloudinaryAssetData that needed to be true in order to transform an existing node into a cloudinaryAsset node. We have a legacy mongoDB site that is set up in this way and we have a media item node type to hold many different kinds of assets, some of which are images which are uploaded to cloudinary on the backend.

After upgrading to gatsby v5 and updating this module i have managed to get images to work in develop, but in build there are a lot of errors around trying to read gatsbyImageData in build, I'm pretty sure this is the build process trying to do something with nodes where we'd previously set cloudinaryAssetData to be false.

Each media item looks like this

 mediaItem {
          cloudinary {
            publicId
            originalWidth
            originalHeight
            cloudinaryAssetData
            cloudName
          }
        ...otherstuff
        }

if the media item is not an image node, the above cloudinary info will be null and cloudinaryAssetData will be false.

I will try to make a patch - but might need some guidance if possible. Below are some of the errors we're getting in case that helps

 ERROR  UNKNOWN

[gatsby-transformer-cloudinary] Missing required fields on mongodbRca2022liveArtistsCloudinary: cloudName=undefined, publicId=undefined

 ERROR  UNKNOWN

[gatsby-transformer-cloudinary] Could not get metadata for mongodbRca2022liveArtistsWorksMediaItemsCloudinary for rca2020 >
rca2022/62b073c09213fab3c571d14d-735997: Request failed with status code 404

running graphql and trying to get all the gatsbyimagedata nodes gives errors like this in graphiQL:

"errors": [
    {
      "message": "Cannot read properties of undefined (reading 'width')",
      "locations": [
        {
          "line": 15,
          "column": 15
        }
      ],
      "path": [
        "allMongodbRca2022LiveArtists",
        "edges",
        5,
        "node",
        "works",
        0,
        "mediaItems",
        6,
        "cloudinary",
        "gatsbyImageData"
      ],
      "extensions": {
        "stack": [
          "TypeError: Cannot read properties of undefined (reading 'width')",
          "    at setDefaultDimensions (/Users/alistairmcclymont/Sites/mtj/RCA/2023/rca-wip-2023-public/node_modules/gatsby-plugin-image/src/image-utils.ts:169:22)",
          "    at y (/Users/alistairmcclymont/Sites/mtj/RCA/2023/rca-wip-2023-public/node_modules/gatsby-plugin-image/src/image-utils.ts:221:10)",
          "    at /Users/alistairmcclymont/Sites/mtj/RCA/2023/rca-wip-2023-public/node_modules/gatsby-transformer-cloudinary/gatsby-plugin-image/resolve-asset.js:116:12",
          "    at processTicksAndRejections (node:internal/process/task_queues:95:5)",
          "    at async Promise.all (index 5)",
          "    at async Promise.all (index 2)",
          "    at async Promise.all (index 6)",
          "    at async Promise.all (index 0)",
          "    at async Promise.all (index 0)",
          "    at async Promise.all (index 0)",
          "    at async Promise.all (index 0)",
          "    at async Promise.all (index 5)",
          "    at async Promise.all (index 0)",
          "    at async Promise.all (index 0)",
          "    at handler (/Users/alistairmcclymont/Sites/mtj/RCA/2023/rca-wip-2023-public/node_modules/graphql-http/lib/handler.js:272:22)",
          "    at requestListener (/Users/alistairmcclymont/Sites/mtj/RCA/2023/rca-wip-2023-public/node_modules/graphql-http/lib/use/express.js:28:34)"
        ]
      }
    },
]

[raae]

I was pretty sure a solution for this was fixed with #218, will have a look at what might be the problem.

[raae]

The error that you are seeing is letting you know the data does not confirm (and it means they should be skipped and resolve to null - not a gatsby image). Thinking they should be warnings instead maybe?

Are the errors happening on the build server, or when you try to build locally?

[amcc]

thanks for the reply - the error is building locally - develop works ok, though the errors above are in develop using graphilql to try to check all 14,000 or so images. I did another test and found that around 13,000 nodes have an image with cloudinary, around 1000 have a medianode node without a cloudinary image - i believe this is the issue, but some of the 404s might mean we have some bad/out of date cloudinary data.

[raae]

I renamed this one to target the error stopping your build @amcc. Open a new issue if you need a way to conditionally transform, after reading my latest comment in #225