Backstage: yarn create-plugin fails due to missing peer dependencies

Created on 17 Apr 2020 · 5Comments · Source: backstage/backstage

Expected Behavior

Following the guide:

npx @backstage/cli create-app

Followed by:

yarn create-plugin

Would ideally work without extra steps or maybe have extra steps being documented.

Current Behavior

$ npx @backstage/cli create-app

? Enter a name for the app [required] test

Creating the app...

 Checking if the directory is available:
  checking      test ✔ 

 Creating a temporary app directory:
  creating      temporary directory ✔ 

 Preparing files:
  copying       README.md ✔ 
  copying       lerna.json ✔ 
  copying       tsconfig.json ✔ 
  copying       .eslintrc.js ✔ 
  templating    package.json.hbs ✔ 
  copying       prettier.config.js ✔ 
  templating    package.json.hbs ✔ 
  copying       tsconfig.json ✔ 
  copying       android-chrome-192x192.png ✔ 
  copying       favicon-16x16.png ✔ 
  copying       favicon.ico ✔ 
  copying       apple-touch-icon.png ✔ 
  copying       robots.txt ✔ 
  copying       index.html ✔ 
  copying       favicon-32x32.png ✔ 
  copying       manifest.json ✔ 
  copying       safari-pinned-tab.svg ✔ 
  copying       index.tsx ✔ 
  copying       App.tsx ✔ 
  copying       plugins.ts ✔ 
  copying       setupTests.ts ✔ 
  copying       App.test.tsx ✔ 
  copying       README.md ✔ 
  templating    package.json.hbs ✔ 
  copying       tsconfig.json ✔ 
  copying       index.ts ✔ 
  copying       setupTests.ts ✔ 
  copying       plugin.test.ts ✔ 
  copying       plugin.ts ✔ 
  copying       WelcomePage.test.tsx ✔ 
  copying       index.ts ✔ 
  copying       WelcomePage.tsx ✔ 
  copying       index.ts ✔ 
  copying       Timer.tsx ✔ 

 Moving to final location:
  moving        test ✔ 

 Building the app:
  executing     yarn install ✔ 
  executing     yarn build ✔ 

🥇  Successfully created test

$ cd test
$ yarn create-plugin  
yarn run v1.22.0
$ backstage-cli create-plugin
? Enter an ID for the plugin [required] sample-plugin

Creating the plugin...

 Checking if the plugin ID is available:
  checking      sample-plugin ✔ 

 Creating a temporary plugin directory:
  creating      temporary directory ✔ 

 Preparing files:
  copying       .eslintrc.js ✔ 
  templating    README.md.hbs ✔ 
  templating    package.json.hbs ✔ 
  copying       tsconfig.json ✔ 
  templating    plugin.test.ts.hbs ✔ 
  templating    plugin.ts.hbs ✔ 
  copying       index.ts ✔ 
  copying       setupTests.ts ✔ 
  templating    ExampleFetchComponent.test.tsx.hbs ✔ 
  templating    ExampleFetchComponent.tsx.hbs ✔ 
  copying       index.ts ✔ 
  templating    ExampleComponent.test.tsx.hbs ✔ 
  templating    ExampleComponent.tsx.hbs ✔ 
  copying       index.ts ✔ 

 Moving to final location:
  moving        sample-plugin ✔ 

 Building the plugin:
  executing     yarn install ✔ 
  executing     yarn build ◜ 
Error: src/components/ExampleFetchComponent/ExampleFetchComponent.tsx:25:19 - error TS2307: Cannot find module '@material-ui/lab/Alert'.

25 import Alert from '@material-ui/lab/Alert';
                     ~~~~~~~~~~~~~~~~~~~~~~~~
src/components/ExampleFetchComponent/ExampleFetchComponent.tsx:26:26 - error TS2307: Cannot find module 'react-use'.

26 import { useAsync } from 'react-use';
                            ~~~~~~~~~~~


error Command failed with exit code 1.
$ backstage-cli plugin:build
[build-cache] input directory is dirty, skipping cache
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
  executing     yarn build ✖ 

Could not execute command yarn build

It seems that something went wrong when creating the plugin 🤔
We are going to clean up, and then you can try again.

 Cleanup:
  remove        temporary directory ✔ 

🔥  Failed to create plugin!

✨  Done in 21.59s.

Possible Solution

Perhaps make the peer dependencies dev dependencies for the sake of a smooth experience for the Getting Started Guide or perhaps provide a step to install the dependencies in the app before running the create plugin command.

Steps to Reproduce (for bugs)

npx @backstage/cli create-app
cd to the new app directory
yarn create-plugin

Context

I was trying to add a new plugin in a backstage app that I created.

Your Environment

 System Software Overview:

      System Version: macOS 10.15.2 (19C57)
      Kernel Version: Darwin 19.2.0

node --version                        
v12.15.0

yarn --version
1.22.0

bug

Source

ruarfff

All 5 comments

I'm happy to contribute a fix here if it's determined one is needed.

ruarfff on 17 Apr 2020

@ruairitobrien, thanks for reporting the issue!

The fix we'd aim for right now is actually to get rid of all peer dependencies, as they don't work particularly well together yarn workspaces. That is, move all peerDependencies to just dependencies, and remove any duplicate devDependencies. Wanna take a shot at that? :grin: