Error: useLocation() may be used only in the context of a <Router> component.

[darylgraham]

After installing the Scorecards plugin (v0.9.0), the backstage frontend is no longer accessible. Instead a React error shows. Even removing the routes etc. from App.tsx/Root.tsx/EntityPage.tsx, the error still shows.

Expected Behavior

Installing the plugin should not break the frontend.

Current Behavior

Installing the plugin breaks the frontend.

Error useLocation() may be used only in the context of a <Router> component.
Call Stack
 invariant
  node_modules/@remix-run/router/dist/router.js:292:11
 useLocation
  node_modules/@backstage/core-plugin-api/node_modules/react-router/dist/index.js:380:95
 useRouteRef
  node_modules/@backstage/core-plugin-api/dist/index.esm.js:380:85
 Settings
  node_modules/@backstage/plugin-user-settings/dist/components/Settings.esm.js:18:92
 renderWithHooks
  node_modules/react-dom/cjs/react-dom.development.js:15486:27
 mountIndeterminateComponent
  node_modules/react-dom/cjs/react-dom.development.js:20098:13
 beginWork
  node_modules/react-dom/cjs/react-dom.development.js:21621:16
 callCallback
  node_modules/react-dom/cjs/react-dom.development.js:4164:14
 invokeGuardedCallbackDev
  node_modules/react-dom/cjs/react-dom.development.js:4213:16
 invokeGuardedCallback
  node_modules/react-dom/cjs/react-dom.development.js:4277:31

Steps to Reproduce

yarn add --cwd packages/app @oriflame/backstage-plugin-score-card

Possible Solution

StackOverflow pointed to react-router and react-router-dom as being potential causes of the issue. A diff of yarn.lock shows that installing this plugin has added react-router@6.4.5 and react-router-dom@6.4.5.

#278 has been opened to update to 6.23.1 for both these packages. That version already exists in my yarn.lock so I assume this will resolve the issue.

Running yarn remove --cwd packages/app @oriflame/backstage-plugin-score-card resolved the issue.

Context

Your Environment

Output of yarn backstage-cli info:

yarn run v1.22.22
$ /workspaces/backstage/backstage/node_modules/.bin/backstage-cli info
OS:   Linux 6.6.22-linuxkit - linux/arm64
node: v18.19.0
yarn: 1.22.22
cli:  0.26.6 (installed)
backstage:  1.27.6

Dependencies:
  @backstage/app-defaults                                          1.5.5
  @backstage/backend-app-api                                       0.7.5
  @backstage/backend-common                                        0.21.7, 0.22.0
  @backstage/backend-defaults                                      0.2.18
  @backstage/backend-dev-utils                                     0.1.4
  @backstage/backend-openapi-utils                                 0.1.11
  @backstage/backend-plugin-api                                    0.6.18
  @backstage/backend-tasks                                         0.5.23
  @backstage/catalog-client                                        1.6.5
  @backstage/catalog-model                                         1.5.0
  @backstage/cli-common                                            0.1.13
  @backstage/cli-node                                              0.2.5
  @backstage/cli                                                   0.26.6
  @backstage/config-loader                                         1.8.0
  @backstage/config                                                1.2.0
  @backstage/core-app-api                                          1.12.5
  @backstage/core-compat-api                                       0.2.5
  @backstage/core-components                                       0.13.10, 0.14.7
  @backstage/core-plugin-api                                       1.9.2
  @backstage/e2e-test-utils                                        0.1.1
  @backstage/errors                                                1.2.4
  @backstage/eslint-plugin                                         0.1.8
  @backstage/frontend-plugin-api                                   0.6.5
  @backstage/integration-aws-node                                  0.1.12
  @backstage/integration-react                                     1.1.27
  @backstage/integration                                           1.11.0
  @backstage/plugin-api-docs                                       0.11.5
  @backstage/plugin-app-backend                                    0.3.67
  @backstage/plugin-app-node                                       0.1.18
  @backstage/plugin-auth-backend-module-atlassian-provider         0.1.10
  @backstage/plugin-auth-backend-module-aws-alb-provider           0.1.10
  @backstage/plugin-auth-backend-module-azure-easyauth-provider    0.1.1
  @backstage/plugin-auth-backend-module-bitbucket-provider         0.1.1
  @backstage/plugin-auth-backend-module-cloudflare-access-provider 0.1.1
  @backstage/plugin-auth-backend-module-gcp-iap-provider           0.2.13
  @backstage/plugin-auth-backend-module-github-provider            0.1.15
  @backstage/plugin-auth-backend-module-gitlab-provider            0.1.15
  @backstage/plugin-auth-backend-module-google-provider            0.1.15
  @backstage/plugin-auth-backend-module-guest-provider             0.1.4
  @backstage/plugin-auth-backend-module-microsoft-provider         0.1.13
  @backstage/plugin-auth-backend-module-oauth2-provider            0.1.15
  @backstage/plugin-auth-backend-module-oauth2-proxy-provider      0.1.11
  @backstage/plugin-auth-backend-module-oidc-provider              0.1.9
  @backstage/plugin-auth-backend-module-okta-provider              0.0.11
  @backstage/plugin-auth-backend                                   0.22.5
  @backstage/plugin-auth-node                                      0.4.13
  @backstage/plugin-auth-react                                     0.1.2
  @backstage/plugin-catalog-backend-module-gitlab-org              0.0.1
  @backstage/plugin-catalog-backend-module-gitlab                  0.3.17
  @backstage/plugin-catalog-backend-module-scaffolder-entity-model 0.1.16
  @backstage/plugin-catalog-backend-module-unprocessed             0.4.5
  @backstage/plugin-catalog-backend                                1.22.0
  @backstage/plugin-catalog-common                                 1.0.23
  @backstage/plugin-catalog-graph                                  0.4.5
  @backstage/plugin-catalog-import                                 0.11.0
  @backstage/plugin-catalog-node                                   1.12.0
  @backstage/plugin-catalog-react                                  1.12.0
  @backstage/plugin-catalog-unprocessed-entities-common            0.0.1
  @backstage/plugin-catalog-unprocessed-entities                   0.2.4
  @backstage/plugin-catalog                                        1.20.0
  @backstage/plugin-devtools-backend                               0.3.4
  @backstage/plugin-devtools-common                                0.1.9
  @backstage/plugin-devtools                                       0.1.14
  @backstage/plugin-events-backend-module-gitlab                   0.2.4
  @backstage/plugin-events-backend                                 0.3.5
  @backstage/plugin-events-node                                    0.3.4
  @backstage/plugin-home-react                                     0.1.13
  @backstage/plugin-home                                           0.7.4
  @backstage/plugin-org                                            0.6.25
  @backstage/plugin-permission-backend-module-allow-all-policy     0.1.15
  @backstage/plugin-permission-backend                             0.5.42
  @backstage/plugin-permission-common                              0.7.13
  @backstage/plugin-permission-node                                0.7.29
  @backstage/plugin-permission-react                               0.4.22
  @backstage/plugin-proxy-backend                                  0.4.16
  @backstage/plugin-scaffolder-backend-module-azure                0.1.10
  @backstage/plugin-scaffolder-backend-module-bitbucket-cloud      0.1.8
  @backstage/plugin-scaffolder-backend-module-bitbucket-server     0.1.8
  @backstage/plugin-scaffolder-backend-module-bitbucket            0.2.8
  @backstage/plugin-scaffolder-backend-module-gerrit               0.1.10
  @backstage/plugin-scaffolder-backend-module-gitea                0.1.8
  @backstage/plugin-scaffolder-backend-module-github               0.2.8
  @backstage/plugin-scaffolder-backend-module-gitlab               0.4.0
  @backstage/plugin-scaffolder-backend                             1.22.7
  @backstage/plugin-scaffolder-common                              1.5.2
  @backstage/plugin-scaffolder-node                                0.4.4
  @backstage/plugin-scaffolder-react                               1.8.6
  @backstage/plugin-scaffolder                                     1.20.1
  @backstage/plugin-search-backend-module-catalog                  0.1.24
  @backstage/plugin-search-backend-module-pg                       0.5.27
  @backstage/plugin-search-backend-module-techdocs                 0.1.23
  @backstage/plugin-search-backend-node                            1.2.23
  @backstage/plugin-search-backend                                 1.5.9
  @backstage/plugin-search-common                                  1.2.11
  @backstage/plugin-search-react                                   1.7.11
  @backstage/plugin-search                                         1.4.11
  @backstage/plugin-techdocs-backend                               1.10.5
  @backstage/plugin-techdocs-module-addons-contrib                 1.1.10
  @backstage/plugin-techdocs-node                                  1.12.4
  @backstage/plugin-techdocs-react                                 1.2.4
  @backstage/plugin-techdocs                                       1.10.5
  @backstage/plugin-user-settings-backend                          0.2.17
  @backstage/plugin-user-settings                                  0.8.6
  @backstage/release-manifests                                     0.0.11
  @backstage/repo-tools                                            0.9.0
  @backstage/test-utils                                            1.5.5
  @backstage/theme                                                 0.4.4, 0.5.5
  @backstage/types                                                 1.1.1
  @backstage/version-bridge                                        1.0.8
Done in 0.68s.

[rahulsaw2003]

I am also facing the same issue.

[jwnmulder]

Same here, although instead of useLocation() we get the same error for useHref(). Recreating yarn.lock seems to resolve it temporarily but the issue pops up every now and then.

[ahilsend]

I'm seeing the same thing. I believe it is due to this change, pinning react-router-dom to version 6.4.5.