backstage: 🐛 Bug Report: "Getting Started" failing

📜 Description

Simple app, following Getting Started Guide fails.

👍 Expected behavior

Simple app should just run.

👎 Actual Behavior with Screenshots

A compilation failure, possibly related to Rect, occurs, with the following error:

[0] ERROR in ../../node_modules/swagger-ui-react/node_modules/react-redux/dist/react-redux.mjs 1097:18-45
[0] export 'useSyncExternalStore' (imported as 'React2') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)
[0]
[0] webpack compiled with 1 error

👟 Reproduction steps

To avoid local environment inconsistencies, I’ve managed to reproduce the bug with the following steps, using a Docker container:

  1. Run docker run -it --rm -p 3000:3000 -p 7007:7007 node:20 bash
  2. Run npx @backstage/create-app@latest (all default answers)
  3. Run cd backstage and then yarn dev

📃 Provide the context for the Bug.

No response

🖥️ Your Environment

Problem occurs both in my local machine and in a docker container. Here:

Local machine:

yarn run v1.22.19
$ /Users/pedro/Developer/GET-INSIGHT/RNP/Arquitetura/PoCs/tmp/backstage/node_modules/.bin/backstage-cli info
OS:   Darwin 23.2.0 - darwin/arm64
node: v18.16.1
yarn: 1.22.19
cli:  0.25.0 (installed)
backstage:  1.21.0

Dependencies:
  @backstage/app-defaults                                          1.4.6
  @backstage/backend-app-api                                       0.5.9
  @backstage/backend-common                                        0.20.0
  @backstage/backend-dev-utils                                     0.1.2
  @backstage/backend-openapi-utils                                 0.1.1
  @backstage/backend-plugin-api                                    0.6.8
  @backstage/backend-tasks                                         0.5.13
  @backstage/catalog-client                                        1.5.1
  @backstage/catalog-model                                         1.4.3
  @backstage/cli-common                                            0.1.13
  @backstage/cli-node                                              0.2.1
  @backstage/cli                                                   0.25.0
  @backstage/config-loader                                         1.6.0
  @backstage/config                                                1.1.1
  @backstage/core-app-api                                          1.11.2
  @backstage/core-compat-api                                       0.1.0
  @backstage/core-components                                       0.13.9
  @backstage/core-plugin-api                                       1.8.1
  @backstage/e2e-test-utils                                        0.1.0
  @backstage/errors                                                1.2.3
  @backstage/eslint-plugin                                         0.1.4
  @backstage/frontend-plugin-api                                   0.4.0
  @backstage/integration-aws-node                                  0.1.8
  @backstage/integration-react                                     1.1.22
  @backstage/integration                                           1.8.0
  @backstage/plugin-api-docs                                       0.10.2
  @backstage/plugin-app-backend                                    0.3.56
  @backstage/plugin-app-node                                       0.1.8
  @backstage/plugin-auth-backend-module-atlassian-provider         0.1.0
  @backstage/plugin-auth-backend-module-gcp-iap-provider           0.2.2
  @backstage/plugin-auth-backend-module-github-provider            0.1.5
  @backstage/plugin-auth-backend-module-gitlab-provider            0.1.5
  @backstage/plugin-auth-backend-module-google-provider            0.1.5
  @backstage/plugin-auth-backend-module-oauth2-provider            0.1.5
  @backstage/plugin-auth-backend-module-oauth2-proxy-provider      0.1.0
  @backstage/plugin-auth-backend-module-okta-provider              0.0.1
  @backstage/plugin-auth-backend                                   0.20.2
  @backstage/plugin-auth-node                                      0.4.2
  @backstage/plugin-catalog-backend-module-scaffolder-entity-model 0.1.5
  @backstage/plugin-catalog-backend                                1.16.0
  @backstage/plugin-catalog-common                                 1.0.19
  @backstage/plugin-catalog-graph                                  0.3.2
  @backstage/plugin-catalog-import                                 0.10.4
  @backstage/plugin-catalog-node                                   1.6.0
  @backstage/plugin-catalog-react                                  1.9.2
  @backstage/plugin-catalog                                        1.16.0
  @backstage/plugin-events-node                                    0.2.17
  @backstage/plugin-github-actions                                 0.6.9
  @backstage/plugin-org                                            0.6.18
  @backstage/plugin-permission-common                              0.7.11
  @backstage/plugin-permission-node                                0.7.19
  @backstage/plugin-permission-react                               0.4.18
  @backstage/plugin-proxy-backend                                  0.4.6
  @backstage/plugin-scaffolder-backend-module-azure                0.1.0
  @backstage/plugin-scaffolder-backend-module-bitbucket            0.1.0
  @backstage/plugin-scaffolder-backend-module-gerrit               0.1.0
  @backstage/plugin-scaffolder-backend-module-github               0.1.0
  @backstage/plugin-scaffolder-backend-module-gitlab               0.2.11
  @backstage/plugin-scaffolder-backend                             1.19.2
  @backstage/plugin-scaffolder-common                              1.4.4
  @backstage/plugin-scaffolder-node                                0.2.9
  @backstage/plugin-scaffolder-react                               1.7.0
  @backstage/plugin-scaffolder                                     1.17.0
  @backstage/plugin-search-backend-module-catalog                  0.1.12
  @backstage/plugin-search-backend-module-pg                       0.5.17
  @backstage/plugin-search-backend-module-techdocs                 0.1.12
  @backstage/plugin-search-backend-node                            1.2.12
  @backstage/plugin-search-backend                                 1.4.8
  @backstage/plugin-search-common                                  1.2.9
  @backstage/plugin-search-react                                   1.7.4
  @backstage/plugin-search                                         1.4.4
  @backstage/plugin-tech-radar                                     0.6.11
  @backstage/plugin-techdocs-backend                               1.9.1
  @backstage/plugin-techdocs-module-addons-contrib                 1.1.3
  @backstage/plugin-techdocs-node                                  1.11.0
  @backstage/plugin-techdocs-react                                 1.1.14
  @backstage/plugin-techdocs                                       1.9.2
  @backstage/plugin-user-settings                                  0.7.14
  @backstage/release-manifests                                     0.0.11
  @backstage/test-utils                                            1.4.6
  @backstage/theme                                                 0.5.0
  @backstage/types                                                 1.1.1
  @backstage/version-bridge                                        1.0.7
Done in 0.83s.

Docker container:

$ /backstage/node_modules/.bin/backstage-cli info
OS:   Linux 6.4.16-linuxkit - linux/arm64
node: v20.10.0
yarn: 1.22.19
cli:  0.25.0 (installed)
backstage:  1.21.0

Dependencies:
  @backstage/app-defaults                                          1.4.6
  @backstage/backend-app-api                                       0.5.9
  @backstage/backend-common                                        0.20.0
  @backstage/backend-dev-utils                                     0.1.2
  @backstage/backend-openapi-utils                                 0.1.1
  @backstage/backend-plugin-api                                    0.6.8
  @backstage/backend-tasks                                         0.5.13
  @backstage/catalog-client                                        1.5.1
  @backstage/catalog-model                                         1.4.3
  @backstage/cli-common                                            0.1.13
  @backstage/cli-node                                              0.2.1
  @backstage/cli                                                   0.25.0
  @backstage/config-loader                                         1.6.0
  @backstage/config                                                1.1.1
  @backstage/core-app-api                                          1.11.2
  @backstage/core-compat-api                                       0.1.0
  @backstage/core-components                                       0.13.9
  @backstage/core-plugin-api                                       1.8.1
  @backstage/e2e-test-utils                                        0.1.0
  @backstage/errors                                                1.2.3
  @backstage/eslint-plugin                                         0.1.4
  @backstage/frontend-plugin-api                                   0.4.0
  @backstage/integration-aws-node                                  0.1.8
  @backstage/integration-react                                     1.1.22
  @backstage/integration                                           1.8.0
  @backstage/plugin-api-docs                                       0.10.2
  @backstage/plugin-app-backend                                    0.3.56
  @backstage/plugin-app-node                                       0.1.8
  @backstage/plugin-auth-backend-module-atlassian-provider         0.1.0
  @backstage/plugin-auth-backend-module-gcp-iap-provider           0.2.2
  @backstage/plugin-auth-backend-module-github-provider            0.1.5
  @backstage/plugin-auth-backend-module-gitlab-provider            0.1.5
  @backstage/plugin-auth-backend-module-google-provider            0.1.5
  @backstage/plugin-auth-backend-module-oauth2-provider            0.1.5
  @backstage/plugin-auth-backend-module-oauth2-proxy-provider      0.1.0
  @backstage/plugin-auth-backend-module-okta-provider              0.0.1
  @backstage/plugin-auth-backend                                   0.20.2
  @backstage/plugin-auth-node                                      0.4.2
  @backstage/plugin-catalog-backend-module-scaffolder-entity-model 0.1.5
  @backstage/plugin-catalog-backend                                1.16.0
  @backstage/plugin-catalog-common                                 1.0.19
  @backstage/plugin-catalog-graph                                  0.3.2
  @backstage/plugin-catalog-import                                 0.10.4
  @backstage/plugin-catalog-node                                   1.6.0
  @backstage/plugin-catalog-react                                  1.9.2
  @backstage/plugin-catalog                                        1.16.0
  @backstage/plugin-events-node                                    0.2.17
  @backstage/plugin-github-actions                                 0.6.9
  @backstage/plugin-org                                            0.6.18
  @backstage/plugin-permission-common                              0.7.11
  @backstage/plugin-permission-node                                0.7.19
  @backstage/plugin-permission-react                               0.4.18
  @backstage/plugin-proxy-backend                                  0.4.6
  @backstage/plugin-scaffolder-backend-module-azure                0.1.0
  @backstage/plugin-scaffolder-backend-module-bitbucket            0.1.0
  @backstage/plugin-scaffolder-backend-module-gerrit               0.1.0
  @backstage/plugin-scaffolder-backend-module-github               0.1.0
  @backstage/plugin-scaffolder-backend-module-gitlab               0.2.11
  @backstage/plugin-scaffolder-backend                             1.19.2
  @backstage/plugin-scaffolder-common                              1.4.4
  @backstage/plugin-scaffolder-node                                0.2.9
  @backstage/plugin-scaffolder-react                               1.7.0
  @backstage/plugin-scaffolder                                     1.17.0
  @backstage/plugin-search-backend-module-catalog                  0.1.12
  @backstage/plugin-search-backend-module-pg                       0.5.17
  @backstage/plugin-search-backend-module-techdocs                 0.1.12
  @backstage/plugin-search-backend-node                            1.2.12
  @backstage/plugin-search-backend                                 1.4.8
  @backstage/plugin-search-common                                  1.2.9
  @backstage/plugin-search-react                                   1.7.4
  @backstage/plugin-search                                         1.4.4
  @backstage/plugin-tech-radar                                     0.6.11
  @backstage/plugin-techdocs-backend                               1.9.1
  @backstage/plugin-techdocs-module-addons-contrib                 1.1.3
  @backstage/plugin-techdocs-node                                  1.11.0
  @backstage/plugin-techdocs-react                                 1.1.14
  @backstage/plugin-techdocs                                       1.9.2
  @backstage/plugin-user-settings                                  0.7.14
  @backstage/release-manifests                                     0.0.11
  @backstage/test-utils                                            1.4.6
  @backstage/theme                                                 0.5.0
  @backstage/types                                                 1.1.1
  @backstage/version-bridge                                        1.0.7
Done in 0.47s.

👀 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?

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 6 months ago
  • Reactions: 15
  • Comments: 23 (9 by maintainers)

Commits related to this issue

Most upvoted comments

Confirmed, the issue is with swagger-ui-react, if I add the following to the resolutions section of the root package.json file it works:

    "resolutions": {
        "@types/react": "^17",
        "@types/react-dom": "^17",
+      "swagger-ui-react": "5.10.5"
    },
+47
awanlin on Jan 8, 2024

@dominikhei sorry, small assumption on my part. You’ll need to run yarn install after you make this change. Can you try that and follow up with the results?

+6
awanlin on Jan 9, 2024

Thanks @awanlin . I happened to be trying out backstage today, noticed the broken getting started, found this issue, and can confirm it’s fixing it on my machine as well. All within 2 hours of issue submission, you had the root cause pegged. 😅👏🏼

+6
jeff-r-koyaltech on Jan 8, 2024

Confirmed, the issue is with swagger-ui-react, if I add the following to the resolutions section of the root package.json file it works:

    "resolutions": {
        "@types/react": "^17",
        "@types/react-dom": "^17",
+      "swagger-ui-react": "5.10.5"
    },

Thanks for support @awanlin, works to me.

+4
kirmayrcosta on Jan 17, 2024

I’m just working on an update of our instance, and 5.11 works with React 18. At least it builds and runs, we don’t actually have an API in our catalog.

Note, to get a full 18 stack, I also have to add resolutions, though:

  "resolutions": {
    "@testing-library/jest-dom": "^6.1.0",
    "@testing-library/react": "^14.0.0",
    "@types/react": "^18",
    "@types/react-dom": "^18"
  },

Which raises the question:

Is there any blocker to upgrading the template to react 18?

+2
Pike on Jan 12, 2024

Hit this also. And the fix of adding "swagger-ui-react": "5.10.5" fixed it for me too.

+2
a-c-m on Jan 10, 2024

Thanks for getting on this issue so fast @awanlin ! I followed your solution, however I still get the same error, is there anything I might have missed / has anybody else got this issue?

I have go the exact same dependencies as in the Docker container section of the original issue, except I am using: OS: Linux 5.10.102.1-microsoft-standard-WSL2 - linux/x64

What version of swagger-ui-react is your lock file pulling when you yarn install? That’s what needs to resolve correctly. Do some of the usual obvious things w/ a yarn install

  • revert your lock file back to the original state as it is in the backstage repo
  • you could try deleting node_modules
  • do a fresh yarn install with the above resolutions fix in place
  • hopefully it’ll work for you - after changing the resolutions setting it’s really just a yarn issue from there

This isn’t the first time this has come up for me when doing a fresh setup, is there any type of test that could be added to the build pipeline to prevent this?

honestly, the whole point of a yarn.lock file is to avoid this. I noticed that when I followed the getting started steps, the yarn.lock file changes! 👀 No wonder it keeps breaking. This is the same problem a CI/CD pipeline would have, correct. And it would have the same solution - yarn doing what it’s supposed to do. 😃

At least that’s how I see it, based on my understanding of the tools. I don’t think backstage’s team should have to do something extra for this. Whatever you locked into when you committed code is known to work. It should use that exactly and nothing else.

+2
jeff-r-koyaltech on Jan 9, 2024

Confirm @awanlin suggestion fixes the problem. Thanks!

+2
intellitour on Jan 9, 2024

@Pike yep I think moving the template to React 18 is the best fix for this tbh.

+1
Rugvip on Jan 16, 2024

We had the same experience on a fresh install. Can’t boot up the app on first try following the getting started guide.

+1
edelbalso on Jan 8, 2024
Read more comments on GitHub
← backstage: 🐛 Bug Report: fetch:plain:file fails with stream is not readable
backstage: 🐛 Bug Report: Github Discovery Catalogs via Wildcard config →