React-DatoCMS crashing. Not sure how to debug this

🆘 Support
1

This is what happens. I cant tell where it happening but looks like a bad image possibly.

file:///Users/derrickthreatt/Documents/GitHub/retrograde-resonance/node_modules/.pnpm/react-datocms@4.1.3_graphql@16.8.1_react@18.2.0/node_modules/react-datocms/dist/esm/Image/index.js:138
    var webpSource = data.webpSrcSet && (React.createElement("source", { srcSet: data.webpSrcSet, sizes: (_b = sizes !== null && sizes !== void 0 ? sizes : data.sizes) !== null && _b !== void 0 ? _b : undefined, type: "image/webp" }));
                          ^

TypeError: Cannot read properties of null (reading 'webpSrcSet')
    at file:///Users/derrickthreatt/Documents/GitHub/retrograde-resonance/node_modules/.pnpm/react-datocms@4.1.3_graphql@16.8.1_react@18.2.0/node_modules/react-datocms/dist/esm/Image/index.js:138:27
    at renderWithHooks (/Users/derrickthreatt/Documents/GitHub/retrograde-resonance/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:5724:16)
    at renderForwardRef (/Users/derrickthreatt/Documents/GitHub/retrograde-resonance/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:5908:18)
    at renderElement (/Users/derrickthreatt/Documents/GitHub/retrograde-resonance/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6071:11)
    at renderNodeDestructiveImpl (/Users/derrickthreatt/Documents/GitHub/retrograde-resonance/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6170:11)
    at renderNodeDestructive (/Users/derrickthreatt/Documents/GitHub/retrograde-resonance/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6142:14)
    at retryTask (/Users/derrickthreatt/Documents/GitHub/retrograde-resonance/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6594:5)
    at performWork (/Users/derrickthreatt/Documents/GitHub/retrograde-resonance/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6642:7)
    at Immediate._onImmediate (/Users/derrickthreatt/Documents/GitHub/retrograde-resonance/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6969:12)
    at process.processImmediate (node:internal/timers:476:21)

Node.js v18.15.0
 ELIFECYCLE  Command failed with exit code 1.
2

This looks like its a bad SVG

3

Hmm… interesting. Sorry about that, this MAY be a bug… I’ll check with the devs on that and get back to you ASAP!

In the meantime, you should be able to avoid this by querying the SVGs separately and then using their url instead of their responsiveImage.src (and bypassing the react-datocms image component):

image
image1705×1080 128 KB

Sorry about that! I’ll check with the devs and let you know as soon as I can.

4

Yeah it was an svg file. Once we figured out which one it was we deleted it. Took a while though

5

I just checked with the devs on this, and unfortunately, right now we consider this intentional… SVGs are not reliably transformed by Imgix and should not go through the <Image/> component. You can filter for this this in the validation UI for images: New validation on asset fields: image transformable by Imgix

If the issue ever comes up, you might want to do that and/or do a check on the frontend to render SVGs differently. Sorry about that, and glad you found a workaround in the meantime!