search

backstage / backstage

Backstage is an open framework for building developer portals
https://backstage.io/
Apache License 2.0
27.98k stars 5.9k forks source link

šŸ› Bug Report: Codemod #16839

Closed SorsOps closed 1 year ago

SorsOps commented 1 year ago

šŸ“œ Description

Running npx @backstage/codemods apply core-imports packages plugins on a freshly created backstage app via @backstage/create-app throws errors around missing deps

šŸ‘ Expected behavior

It should perform the code modifications without error

šŸ‘Ž Actual Behavior with Screenshots

Throws errors relating to missing dependencies. See the context below.

<REDACTED>\backstage\backstage>npx @backstage/codemods apply core-imports packages/app/src
Running jscodeshift with these arguments: --parser=tsx --extensions=tsx,js,ts,tsx --transform <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\@backstage\codemods\transforms\core-imports.js --ignore-pattern=**/node_modules/** packages/app/src
Processing 12 files... 
Spawning 11 workers...
Sending 2 files to free worker...
Sending 2 files to free worker...
Sending 2 files to free worker...
Sending 2 files to free worker...
Sending 2 files to free worker...
Sending 2 files to free worker...
 ERR packages\app\src\apis.ts Transformation error (Cannot find module 'lodash' Require stack: - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\Worker.js)
Error: Cannot find module 'lodash'
Require stack:
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js
 ERR packages\app\src\index.tsx Transformation error (Cannot find module 'lodash' Require stack: - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\Worker.js)
Error: Cannot find module 'lodash'
Require stack:
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js
 ERR packages\app\src\App.test.tsx Transformation error (Cannot find module 'lodash' Require stack: - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\Worker.js)
Error: Cannot find module 'lodash'
Require stack:
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js
 ERR packages\app\src\App.tsx Transformation error (Cannot find module 'lodash' Require stack: - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\Worker.js)
Error: Cannot find module 'lodash'
Require stack:
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js
 ERR packages\app\src\auth.tsx Transformation error (Cannot find module 'lodash' Require stack: - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\Worker.js)
Error: Cannot find module 'lodash'
Require stack:
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js
 ERR packages\app\src\setupTests.ts Transformation error (Cannot find module 'lodash' Require stack: - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\Worker.js)
Error: Cannot find module 'lodash'
Require stack:
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js
 ERR packages\app\src\components\Root\LogoIcon.tsx Transformation error (Cannot find module 'lodash' Require stack: - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\Worker.js)
Error: Cannot find module 'lodash'
Require stack:
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js
 ERR packages\app\src\components\Root\index.ts Transformation error (Cannot find module 'lodash' Require stack: - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\Worker.js)
Error: Cannot find module 'lodash'
Require stack:
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js
 ERR packages\app\src\components\Root\LogoFull.tsx Transformation error (Cannot find module 'lodash' Require stack: - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\Worker.js)
Error: Cannot find module 'lodash'
Require stack:
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js
 ERR packages\app\src\components\Root\Root.tsx Transformation error (Cannot find module 'lodash' Require stack: - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\Worker.js)
Error: Cannot find module 'lodash'
Require stack:
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js
 ERR packages\app\src\components\catalog\EntityPage.tsx Transformation error (Cannot find module 'lodash' Require stack: - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\Worker.js)
Error: Cannot find module 'lodash'
Require stack:
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js
 ERR packages\app\src\components\search\SearchPage.tsx Transformation error (Cannot find module 'lodash' Require stack: - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js - <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\Worker.js)
Error: Cannot find module 'lodash'
Require stack:
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\parser\tsx.js
- <REDACTED>\AppData\Local\npm-cache\_npx\d4a7efee46ae6348\node_modules\jscodeshift\src\getParser.js

Specifically lodash

šŸ‘Ÿ Reproduction steps

npx @backstage/create-app cd backstage npx @backstage/codemods apply core-imports packages plugins

šŸ“ƒ Provide the context for the Bug.

Looking at jscodeshift I see that lodash is not listed as a direct dependency despite it requiring it in the dist

image

I believe adding lodash as a direct dependency will work to fix the issue for now , but looks like this needs a PR opened with the upstream

šŸ–„ļø Your Environment

$ backstage-cli info OS: Windows_NT 10.0.19044 - win32/x64 node: v18.12.1 yarn: 1.22.19 cli: 0.22.3 (installed) backstage: 1.11.0

Dependencies: @backstage/app-defaults 1.2.0 @backstage/backend-app-api 0.4.0 @backstage/backend-common 0.18.2 @backstage/backend-dev-utils 0.1.0 @backstage/backend-plugin-api 0.4.0 @backstage/backend-tasks 0.4.3 @backstage/catalog-client 1.3.1 @backstage/catalog-model 1.2.0 @backstage/cli-common 0.1.11 @backstage/cli 0.22.3 @backstage/config-loader 1.1.8 @backstage/config 1.0.6 @backstage/core-app-api 1.5.0 @backstage/core-components 0.12.4 @backstage/core-plugin-api 1.4.0 @backstage/errors 1.1.4 @backstage/eslint-plugin 0.1.1 @backstage/integration-aws-node 0.1.1 @backstage/integration-react 1.1.10 @backstage/integration 1.4.2 @backstage/plugin-api-docs 0.9.0 @backstage/plugin-app-backend 0.3.42 @backstage/plugin-auth-backend 0.18.0 @backstage/plugin-auth-node 0.2.11 @backstage/plugin-catalog-backend-module-github 0.2.5 @backstage/plugin-catalog-backend 1.7.2 @backstage/plugin-catalog-common 1.0.11 @backstage/plugin-catalog-graph 0.2.27 @backstage/plugin-catalog-import 0.9.5 @backstage/plugin-catalog-node 1.3.3 @backstage/plugin-catalog-react 1.3.0 @backstage/plugin-catalog 1.8.0 @backstage/plugin-events-node 0.2.3 @backstage/plugin-github-actions 0.5.15 @backstage/plugin-org 0.6.5 @backstage/plugin-permission-common 0.7.3 @backstage/plugin-permission-node 0.7.5 @backstage/plugin-permission-react 0.4.10 @backstage/plugin-proxy-backend 0.2.36 @backstage/plugin-scaffolder-backend 1.11.0 @backstage/plugin-scaffolder-common 1.2.5 @backstage/plugin-scaffolder-node 0.1.0 @backstage/plugin-scaffolder-react 1.1.0 @backstage/plugin-scaffolder 1.11.0 @backstage/plugin-search-backend-module-pg 0.5.3 @backstage/plugin-search-backend-node 1.1.3 @backstage/plugin-search-backend 1.2.3 @backstage/plugin-search-common 1.2.1 @backstage/plugin-search-react 1.5.0 @backstage/plugin-search 1.1.0 @backstage/plugin-tech-radar 0.6.1 @backstage/plugin-techdocs-backend 1.5.3 @backstage/plugin-techdocs-module-addons-contrib 1.0.10 @backstage/plugin-techdocs-node 1.5.0 @backstage/plugin-techdocs-react 1.1.3 @backstage/plugin-techdocs 1.5.0 @backstage/plugin-user-settings 0.7.0 @backstage/release-manifests 0.0.8 @backstage/test-utils 1.2.5 @backstage/theme 0.2.17 @backstage/types 1.0.2 @backstage/version-bridge 1.0.3 Done in 0.94s.

šŸ‘€ Have you spent some time to check if this bug has been raised before?

šŸ¢ Have you read the Code of Conduct?

Are you willing to submit PR?

Yes I am willing to submit a PR!

SorsOps commented 1 year ago

Created an issue on the jscodeshift repo https://github.com/facebook/jscodeshift/issues/550

freben commented 1 year ago

Am I right in understanding that the problem would also be resolved by (at least temporarily) adding lodash as a dependency to the script package? If so, it sounds like it'd be worth doing in the mean time to gloss over the issue until jscodeshift responds.

SorsOps commented 1 year ago

I believe so, however lodash is a heavy package, whilst it would be a temporary fix, it does add some overhead https://bundlephobia.com/package/lodash@4.17.21

Also looking at why lodash is there, its only there as part of their transpilation effort to support ... spreads, the jscodeshift team need to update their compilation flow to either inline operations like that as a part of a polyfill or at least note the additional runtime libs its using to support <ES6

Daniel15 commented 1 year ago

Which version of jscodeshift are you using? lodash hasn't been required since jscodeshift 0.13.0, released on 2021-06-26.

SorsOps commented 1 year ago

The more I've dug into this , the more this seems to be an npm error when resolving versions.

I've created a repo here https://github.com/SorsOps/codeshift-reproducible

With a fresh install of @backstage/codemods we end off with jscodeshift@0.11.0 which causes the error despite @backstage/codemodes specifying 0.14.0. The 0.11.0 comes from jscodeshift-add-imports

  "peerDependencies": {
    "jscodeshift": "^0.7.0 || ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0"
  }

which forces 0.11.0 to come through. Apologies to @Daniel15 this seems to be https://github.com/codemodsquad/jscodeshift-add-imports problem and npm not using 0.14.0 over 0.11.0 nor warning me.

I've created an issues for them https://github.com/codemodsquad/jscodeshift-add-imports/issues/42

@freben should we leave this issue here for visibility till its resolved?

github-actions[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.