🐛 Bug Report: Backstage basic installation fails

📜 Description

When I run the basic installation of backstage:

npx @backstage/create-app

It fails with the following error:

❯ npx @backstage/create-app
? Enter a name for the app [required] unbox

Creating the app...

 Checking if the directory is available:
  checking      unbox ✔ 

 Creating a temporary app directory:
  creating      temporary directory ✔ 

 Preparing files:
  copying       .dockerignore ✔ 
  templating    .eslintrc.js.hbs ✔ 
  templating    .gitignore.hbs ✔ 
  copying       .prettierignore ✔ 
  copying       README.md ✔ 
  copying       app-config.local.yaml ✔ 
  copying       app-config.production.yaml ✔ 
  templating    backstage.json.hbs ✔ 
  templating    app-config.yaml.hbs ✔ 
  templating    catalog-info.yaml.hbs ✔ 
  copying       lerna.json ✔ 
  templating    package.json.hbs ✔ 
  copying       tsconfig.json ✔ 
  copying       README.md ✔ 
  copying       entities.yaml ✔ 
  copying       org.yaml ✔ 
  copying       template.yaml ✔ 
  copying       catalog-info.yaml ✔ 
  copying       index.js ✔ 
  copying       package.json ✔ 
  copying       README.md ✔ 
  templating    .eslintrc.js.hbs ✔ 
  copying       Dockerfile ✔ 
  copying       README.md ✔ 
  templating    package.json.hbs ✔ 
  copying       index.test.ts ✔ 
  copying       index.ts ✔ 
  copying       types.ts ✔ 
  copying       app.ts ✔ 
  copying       auth.ts ✔ 
  copying       catalog.ts ✔ 
  copying       proxy.ts ✔ 
  copying       scaffolder.ts ✔ 
  copying       techdocs.ts ✔ 
  templating    search.ts.hbs ✔ 
  templating    .eslintrc.js.hbs ✔ 
  templating    package.json.hbs ✔ 
  copying       cypress.json ✔ 
  copying       android-chrome-192x192.png ✔ 
  copying       favicon-16x16.png ✔ 
  copying       apple-touch-icon.png ✔ 
  copying       favicon-32x32.png ✔ 
  copying       index.html ✔ 
  copying       favicon.ico ✔ 
  copying       manifest.json ✔ 
  copying       robots.txt ✔ 
  copying       safari-pinned-tab.svg ✔ 
  copying       .eslintrc.json ✔ 
  copying       app.js ✔ 
  copying       App.test.tsx ✔ 
  copying       apis.ts ✔ 
  copying       index.tsx ✔ 
  copying       App.tsx ✔ 
  copying       setupTests.ts ✔ 
  copying       LogoIcon.tsx ✔ 
  copying       LogoFull.tsx ✔ 
  copying       index.ts ✔ 
  copying       Root.tsx ✔ 
  copying       EntityPage.tsx ✔ 
  copying       SearchPage.tsx ✔ 

 Moving to final location:
  moving        unbox ✔ 

 Building the app:
  executing     yarn install ✔ 
  executing     yarn tsc ◠ error Command failed with exit code 2.
yarn run v1.22.19
$ tsc
packages/backend/src/plugins/catalog.ts:9:47 - error TS2345: Argument of type 'PluginEnvironment' is not assignable to parameter of type 'CatalogEnvironment'.
  The types of 'reader.readUrl' are incompatible between these types.
    Type '((url: string, options?: ReadUrlOptions | undefined) => Promise<ReadUrlResponse>) | undefined' is not assignable to type '(url: string, options?: ReadUrlOptions | undefined) => Promise<ReadUrlResponse>'.
      Type 'undefined' is not assignable to type '(url: string, options?: ReadUrlOptions | undefined) => Promise<ReadUrlResponse>'.

9   const builder = await CatalogBuilder.create(env);
                                                ~~~

packages/backend/src/plugins/scaffolder.ts:17:5 - error TS2322: Type 'import("/Users/hpeters/WebstormProjects/clean-backstage-out-of-the-box/unbox/packages/backend/node_modules/@backstage/backend-common/dist/index").UrlReader' is not assignable to type 'import("/Users/hpeters/WebstormProjects/clean-backstage-out-of-the-box/unbox/node_modules/@backstage/backend-common/dist/index").UrlReader'.

17     reader: env.reader,
       ~~~~~~

  node_modules/@backstage/plugin-scaffolder-backend/dist/index.d.ts:730:5
    730     reader: UrlReader;
            ~~~~~~
    The expected type comes from property 'reader' which is declared here on type 'RouterOptions'

packages/backend/src/plugins/techdocs.ts:18:5 - error TS2322: Type 'import("/Users/hpeters/WebstormProjects/clean-backstage-out-of-the-box/unbox/packages/backend/node_modules/@backstage/backend-common/dist/index").UrlReader' is not assignable to type 'import("/Users/hpeters/WebstormProjects/clean-backstage-out-of-the-box/unbox/node_modules/@backstage/backend-common/dist/index").UrlReader'.

18     reader: env.reader,
       ~~~~~~

  node_modules/@backstage/plugin-techdocs-node/dist/index.d.ts:22:5
    22     reader: UrlReader;
           ~~~~~~
    The expected type comes from property 'reader' which is declared here on type 'PreparerConfig'


Found 3 errors in 3 files.

Errors  Files
     1  packages/backend/src/plugins/catalog.ts:9
     1  packages/backend/src/plugins/scaffolder.ts:17
     1  packages/backend/src/plugins/techdocs.ts:18
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
  executing     yarn tsc ✖ 

Error: Could not execute command yarn tsc

It seems that something went wrong when creating the app 🤔

🔥  Failed to create app!

👍 Expected behavior

The app should create successfully

👎 Actual Behavior with Screenshots

👟 Reproduction steps

Run:

npx @backstage/create-app

📃 Provide the context for the Bug.

No response

🖥️ Your Environment

❯ yarn backstage-cli info
yarn run v1.22.19
$ /Users/hpeters/WebstormProjects/clean-backstage-out-of-the-box/unbox/node_modules/.bin/backstage-cli info
OS:   Darwin 22.1.0 - darwin/arm64
node: v16.18.0
yarn: 1.22.19
cli:  0.18.1 (installed)
backstage:  1.5.0

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.18.1
  @backstage/config-loader                         1.1.6
  @backstage/config                                1.0.4
  @backstage/core-app-api                          1.2.0
  @backstage/core-components                       0.11.2, 0.12.0
  @backstage/core-plugin-api                       1.1.0
  @backstage/errors                                1.1.3
  @backstage/integration-react                     1.1.6
  @backstage/integration                           1.4.0
  @backstage/plugin-api-docs                       0.8.11
  @backstage/plugin-app-backend                    0.3.38
  @backstage/plugin-auth-backend                   0.15.1
  @backstage/plugin-auth-node                      0.2.7
  @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.8.12
  @backstage/plugin-catalog-node                   1.2.1
  @backstage/plugin-catalog-react                  1.2.1
  @backstage/plugin-catalog                        1.6.1
  @backstage/plugin-github-actions                 0.5.11
  @backstage/plugin-org                            0.5.10
  @backstage/plugin-permission-common              0.6.4, 0.7.1
  @backstage/plugin-permission-node                0.6.5, 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.3.6
  @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-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.4.8
  @backstage/release-manifests                     0.0.5
  @backstage/test-utils                            1.2.2
  @backstage/theme                                 0.2.16
  @backstage/types                                 1.0.1
  @backstage/version-bridge                        1.0.2
✨  Done in 2.71s.

👀 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, but I’m happy to collaborate on a PR with someone else

[sennyeya]

I had the same issue, was able to fix by changing my packages/backend dependency on @backstage/backend-common from "^0.15.0" to "^0.16". I noticed that when I run yarn install, it updated the @backstage/backend-common of other package to 0.16 but not the backend package.

This is probably due to the default caret and not a tilde on the dependency (https://michaelsoolee.com/npm-package-tilde-caret/) since we’re still in minor versions?

FWIW, my project has existed for a while, this was just a result of deleting the yarn.lock file and reinstalling.

[freben]

Just noting before the weekend: Deleting a lock file is inherently risky and definitely can lead to breakages, it should be avoided.