backstage: 🐛 Bug Report: TechDocsAddons breaks rendering Tech Docs pages after updating to 1.8

📜 Description

Updated from version 1.7.0 -> 1.8.3 using yarn backstage-cli versions:bump. After the upgrade, all tech docs pages failed to render.

The <TechDocsAddons> component from @backstage/plugin-techdocs-react breaks rendering of tech docs pages. There is no error output in the browser console or logs, as if perhaps there’s a null check that doesn’t render if data is missing. If the section is commented out, the page loads as expected. This behavior only occurs when children are nested underneath the component. i.e.,

      <TechDocsAddons>
        <ReportIssue />
      </TechDocsAddons>

I also tried rendering the Mermaid addon underneath and got the same behavior. If you leave it without children, nothing breaks.

A search through Discord showed other people experiencing similar behavior as early as 1.8.2. I’m trying to bump to 1.8.3, but I’m not sure which specific version is causing the problem.

👍 Expected behavior

TechDocsAddons component can be used on TechDocs pages without rendering issues.

👎 Actual Behavior with Screenshots

Page fails to render any content:

No console errors or logs indicating anything is wrong.

👟 Reproduction steps

Have a project that is using the TechDocsAddons component when rendering TechDocs on version 1.7.*. Use any addon as a child.

Upgrade backstage using the cli command yarn backstage-cli versions:bump to bring everything up to the latest version.

View TechDocs pages.

📃 Provide the context for the Bug.

Removing TechDocsAddons works as a temporary work-around, but I’d like to continue using addons. I am waiting on the upgrade for my project until we can fix.

🖥️ Your Environment

OS: Darwin 21.6.0 - darwin/x64 node: v16.18.1 yarn: 1.22.0 cli: 0.21.1 (installed) backstage: 1.8.3

👀 Have you spent some time to check if this bug has been raised before?

I checked and didn’t find similar issue

🏢 Have you read the Code of Conduct?

I have read the Code of Conduct

Are you willing to submit PR?

No, I don’t have time to work on this right now

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 7
Comments: 30 (21 by maintainers)

Most upvoted comments

I think those warnings only show when running locally. They should definitely be fixed, but I’m fairly certain they’re not relevant to this issue.

@omartheironman

@agentbellnorm should I open another issue for this?

Please do! 💯

Regarding the versions you both referred to, They’re technically supported since it’s in the version range of the peer dependencies. But I have been able to confirm in the test-repo we created that downgrading to

"react-router": "6.0.0-beta.0",
"react-router-dom": "6.0.0-beta.0",

indeed produces the error.

Hard to say why, but unless anyone has a valid use case for staying on the beta versions, I agree with closing this issue with the solution being to upgrade react-router and react-router-dom.

Big thanks to everyone for quick responses! 🥇

agentbellnorm on Dec 15, 2022

Yes, ours is on

    "react-router": "6.0.0-beta.0",
    "react-router-dom": "6.0.0-beta.0",

When we upgrade to latest, everything is working as expected 🎉

    "react-router": "^6.4.5",
    "react-router-dom": "^6.4.5",

ciprianna on Dec 15, 2022

#15312 Adds backwards compatibility with 6.0.0-beta.0 👍

agentbellnorm on Dec 20, 2022

I would like to add that there may be a bug with the version:bump cli then, as we’ve upgraded every minor version available and it somehow missed those dependencies (I’m assuming the others faced this as well?)

dmckernanacv on Dec 15, 2022

Mine was on

    "react-router": "6.0.0-beta.0",
    "react-router-dom": "6.0.0-beta.0",

Which seems to have been used prior to backstage 1.7.0

dmckernanacv on Dec 15, 2022

for everyone stuck on this, I managed to resolve this by comparing and upgrading my dependancy in package.json

“@backstage/plugin-techdocs”: “^1.4.0”, “@backstage/plugin-techdocs-module-addons-contrib”: “^1.0.6”, “@backstage/plugin-techdocs-react”: “^1.0.6”, “react-router”: “6.3.0”, “react-router-dom”: “6.3.0”
It rendered for me 

Looks like that fixed it for us too. Not sure how that dependency update was missed, we use the command line tool for generating upgrades, looks like it was updated with version 1.7.0.

I just checked our PR for upgrading to 1.7.0 and sure enough, react-router and react-router-dom had no changes.

dmckernanacv on Dec 15, 2022

for everyone stuck on this, I managed to resolve this by comparing and upgrading my dependancy in package.json

“@backstage/plugin-techdocs”: “^1.4.0”, “@backstage/plugin-techdocs-module-addons-contrib”: “^1.0.6”, “@backstage/plugin-techdocs-react”: “^1.0.6”, “react-router”: “6.3.0”, “react-router-dom”: “6.3.0”

It rendered for me

omartheironman on Dec 15, 2022

if its any help, the issue happens right here where we seem to be stuck in a loop for sometime until the it we get the error

index.esm.js:290 Uncaught TypeError: Cannot read properties of undefined (reading ‘getSelection’) at HTMLDocument.<anonymous> (index.esm.js:290:43) at H (debounce.js:95:19) at un (debounce.js:144:14) at J (debounce.js:132:14)

omartheironman on Dec 15, 2022

@ciprianna can confirm it only works like this:

    <TechDocsAddons>
    </TechDocsAddons>

ivanaguilario on Dec 14, 2022

@ivanaguilario - I experience this issue trying to render any add-on. If I remove Mermaid and leave it with just <ReportIssue /> the page fails to render.

ciprianna on Dec 14, 2022