🐛 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

Dependencies: @backstage/app-defaults 1.0.8 @backstage/backend-common 0.15.2, 0.16.0 @backstage/backend-plugin-api 0.1.4 @backstage/backend-tasks 0.3.7 @backstage/catalog-client 1.1.2 @backstage/catalog-model 1.1.3 @backstage/cli-common 0.1.10 @backstage/cli 0.21.1 @backstage/config-loader 1.1.6 @backstage/config 1.0.4 @backstage/core-app-api 1.2.0 @backstage/core-components 0.12.0, 0.9.5 @backstage/core-plugin-api 1.1.0 @backstage/dev-utils 1.0.8 @backstage/errors 1.1.3 @backstage/integration-react 1.1.6 @backstage/integration 1.4.0 @backstage/plugin-adr-backend 0.2.3 @backstage/plugin-adr-common 0.2.3 @backstage/plugin-adr 0.2.3 @backstage/plugin-api-docs 0.8.11 @backstage/plugin-app-backend 0.3.38 @backstage/plugin-auth-backend 0.17.1 @backstage/plugin-auth-node 0.2.7 @backstage/plugin-catalog-backend-module-github 0.2.1 @backstage/plugin-catalog-backend 1.5.1 @backstage/plugin-catalog-common 1.0.8 @backstage/plugin-catalog-graph 0.2.23 @backstage/plugin-catalog-import 0.9.1 @backstage/plugin-catalog-node 1.2.1 @backstage/plugin-catalog-react 1.2.1 @backstage/plugin-catalog 1.6.1 @backstage/plugin-cloudbuild 0.3.11 @backstage/plugin-github-actions 0.5.11 @backstage/plugin-home 0.4.27 @backstage/plugin-org 0.6.1 @backstage/plugin-permission-common 0.7.1 @backstage/plugin-permission-node 0.7.1 @backstage/plugin-permission-react 0.4.7 @backstage/plugin-proxy-backend 0.2.32 @backstage/plugin-scaffolder-backend 1.8.0 @backstage/plugin-scaffolder-common 1.2.2 @backstage/plugin-scaffolder 1.8.0 @backstage/plugin-search-backend-module-pg 0.4.2 @backstage/plugin-search-backend-node 1.0.4 @backstage/plugin-search-backend 1.1.1 @backstage/plugin-search-common 1.1.1 @backstage/plugin-search-react 1.2.1 @backstage/plugin-search 1.0.4 @backstage/plugin-stack-overflow 0.1.7 @backstage/plugin-tech-radar 0.5.18 @backstage/plugin-techdocs-backend 1.4.1 @backstage/plugin-techdocs-module-addons-contrib 1.0.6 @backstage/plugin-techdocs-node 1.4.2 @backstage/plugin-techdocs-react 1.0.6 @backstage/plugin-techdocs 1.4.0 @backstage/plugin-user-settings 0.5.1 @backstage/release-manifests 0.0.7 @backstage/test-utils 1.2.2 @backstage/theme 0.2.16 @backstage/types 1.0.1 @backstage/version-bridge 1.0.2

👀 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

[agentbellnorm]

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! 🥇

[ciprianna]

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",