useState error CCg/Backstage

[Corey Samuels]

Hello!

We're interested to use this Backstage plugin at Etsy ... we're trying it out and getting a cryptic error (for us who are not too react savvy) ... any help is much appreciated!

What we did:

- installed the plugin as per the instructions

- setup the configuration parameters in app-config

What's happening:

- nothing of interest in the Backstage logs

- on the front end, (http://localhost:3000/cloud-carbon-footprint) we're getting:

TypeError
Cannot read properties of null (reading 'useState')
Call Stack
 useState
  node_modules/@cloud-carbon-footprint/client/node_modules/react/cjs/react.development.js:1623:21
 useRemoteFootprintService
  node_modules/@cloud-carbon-footprint/client/dist/utils/hooks/FootprintServiceHook.js:12:50
 useFootprintData
  node_modules/@cloud-carbon-footprint/client/dist/utils/hooks/FootprintDataHook.js:10:73
 PluginTabs
  node_modules/@cloud-carbon-footprint/backstage-plugin-frontend/dist/esm/Plugin-0c8d69e6.esm.js:115:101
 renderWithHooks
  node_modules/react-dom/cjs/react-dom.development.js:14985:18
 mountIndeterminateComponent
  node_modules/react-dom/cjs/react-dom.development.js:17811:13
 beginWork
  node_modules/react-dom/cjs/react-dom.development.js:19049:16
 HTMLUnknownElement.callCallback
  node_modules/react-dom/cjs/react-dom.development.js:3945:14
 Object.invokeGuardedCallbackDev
  node_modules/react-dom/cjs/react-dom.development.js:3994:16
 invokeGuardedCallback
  node_modules/react-dom/cjs/react-dom.development.js:4056:31

Thanks for any help or guidance!

[Cloud Carbon Footprint]

Hello,

Thanks for bringing this up. We actually have an open issue for this located here where you can learn more information about the problem (TLDR - We introduced React 18 in CCF recently and there are compatibility issues until Backstage does the same.

We have provided a low-lift workaround solution to add `"react": "^17"` to the resolutions object in the root package.json of your Backstage application.

Hope this helps - please feel free to reach out to green-cl...@thoughtworks.com if you would like to talk through the implementation or just chat further and see how we can support!

Thanks,
The Cloud Carbon Footprint Team at Thoughtworks