search

teambit / envs

Component development environments for the Bit community
https://bit.dev/bit/envs
Other
63 stars 9 forks source link

Peer dependencies added as regular dependencies; breaks ng-packager compilation #119

Closed maxmumford closed 3 years ago

maxmumford commented 4 years ago

Describe the bug

Peer dependencies are being added as regular dependencies. When the angular compiler runs ng-packager, it throws the following warning and error as a result:

WARNING: Distributing npm packages with 'dependencies' is not recommended. Please consider adding ${componentAddedAsPeerDependency} to 'peerDependencies' or remove it from 'dependencies'.

ERROR: Dependency ${componentAddedAsPeerDependency} must be explicitly whitelisted.

Steps to Reproduce

git clone https://github.com/maxmumford/bit-peer-deps-bug-repro
cd bit-peer-deps-bug-repro
npm i
bit import maxm.bit-bugs/hello-world
bit build # ng-packager error appears here because of hello-world component added as dependency
bit show greeting # notice hello-world component is added as dependency not a peerDependency as is defined in package.json

Expected Behavior

As per the dependency graph resolution flow chart, due to the fact that the hello-world component is included in the peerDependencies section of the workspaces root package.json, I woud expect the hello-world component to be added as a peerDependency and show up as such when running bit show hello-world. ng-packager would no longer throw an error during compliation and the angular component would compile.

Screenshots, exceptions and logs

Bit build command:

C:\Dev\test\bit-peer-deps\src\app\greeting [master +1 ~1 -0 !]> bit build
| isolating component - greetingBuilding Angular Package

------------------------------------------------------------------------------
Building entry point '@bit/greeting'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
Bundling to FESM2015
/ isolating component - greetingBundling to FESM5
Bundling to UMD
tput.globals – guessing 'maxm_bitBugs_helloWorld'
Writing package metadata
WARNING: Distributing npm packages with 'dependencies' is not recommended. Please consider adding @bit/maxm.bit-bugs.hello-world to 'peerDependencies' or remove it from 'dependencies'.
ERROR: Dependency @bit/maxm.bit-bugs.hello-world must be explicitly whitelisted.        
Error: Dependency @bit/maxm.bit-bugs.hello-world must be explicitly whitelisted.        
    at checkNonPeerDependencies (C:\Dev\test\bit-peer-deps\.git\bit\components\compilers\angular\bit.envs\9.0.11\node_modules\ng-packagr\lib\ng-package\entry-point\write-package.transform.js:183:19)
    at C:\Dev\test\bit-peer-deps\.git\bit\components\compilers\angular\bit.envs\9.0.11\node_modules\ng-packagr\lib\ng-package\entry-point\write-package.transform.js:122:13     
    at Generator.next (<anonymous>)
    at C:\Dev\test\bit-peer-deps\.git\bit\components\compilers\angular\bit.envs\9.0.11\node_modules\ng-packagr\lib\ng-package\entry-point\write-package.transform.js:8:71       
    at new Promise (<anonymous>)
    at __awaiter (C:\Dev\test\bit-peer-deps\.git\bit\components\compilers\angular\bit.envs\9.0.11\node_modules\ng-packagr\lib\ng-package\entry-point\write-package.transform.js:4:12)
    at writePackageJson (C:\Dev\test\bit-peer-deps\.git\bit\components\compilers\angular\bit.envs\9.0.11\node_modules\ng-packagr\lib\ng-package\entry-point\write-package.transform.js:101:12)
    at C:\Dev\test\bit-peer-deps\.git\bit\components\compilers\angular\bit.envs\9.0.11\node_modules\ng-packagr\lib\ng-package\entry-point\write-package.transform.js:68:11      
    at Generator.next (<anonymous>)
    at fulfilled (C:\Dev\test\bit-peer-deps\.git\bit\components\compilers\angular\bit.en5:58)

bit show greeting:

╔══════════════════╤════════════════════════════════════════════════════╗
║ Id               │ greeting                                           ║
╟──────────────────┼────────────────────────────────────────────────────╢
║ Language         │ javascript                                         ║
╟──────────────────┼────────────────────────────────────────────────────╢
║ Main File        │ src/app/greeting/public_api.ts                     ║
╟──────────────────┼────────────────────────────────────────────────────╢
║ Dependencies     │ maxm.bit-bugs/hello-world@0.0.1                    ║
║                  │ @angular/core@~9.0.2                               ║
║                  │ @angular/common@~9.0.2                             ║
║ Dev Dependencies │ tslib@>=1.0.0                                      ║
║                  │ webpack-env@>=0.8.0                                ║
║                  │ @angular/core@>= 8.0.0                             ║
╟──────────────────┼────────────────────────────────────────────────────╢
║ Files            │ src/app/greeting/greeting.component.html           ║
║                  │ src/app/greeting/greeting.component.scss           ║
║                  │ src/app/greeting/greeting.component.ts             ║
║                  │ src/app/greeting/greeting.module.ts                ║
║                  │ src/app/greeting/public_api.ts                     ║
╚══════════════════╧════════════════════════════════════════════════════╝

package.json

{
  "name": "bit-peer-deps",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "peerDependencies": {
    "@bit/maxm.bit-bugs.hello-world": "0.0.1"
  },
  "dependencies": {
    "@angular/animations": "~9.0.2",
    "@angular/common": "~9.0.2",
    "@angular/compiler": "~9.0.2",
    "@angular/core": "~9.0.2",
    "@angular/forms": "~9.0.2",
    "@angular/platform-browser": "~9.0.2",
    "@angular/platform-browser-dynamic": "~9.0.2",
    "@angular/router": "~9.0.2",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.3",
    "@angular/cli": "~9.0.3",
    "@angular/compiler-cli": "~9.0.2",
    "@angular/language-service": "~9.0.2",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.7.5"
  },
  "bit": {
    "env": {
      "compiler": "bit.envs/compilers/angular@9.0.11"
    },
    "componentsDefaultDirectory": "components/{name}",
    "packageManager": "npm"
  }
}

Specifications

Additional Context

Potentially related issues:

teambit/bit#2220 teambit/bit#2217

Tallyb commented 4 years ago

The flow you described applies to "regular" npm packages. The hello world is a component. It should not be marked as interdependencies, but as a dependency, and the Angular compiler should whitelist it automatically.

maxmumford commented 4 years ago

Hey @Tallyb thanks for your message. Is marking the component as a dependency as opposed to interdependency something I should do, or is that an issue with the angular compiler env? If the former, could you provide a bit more info?

Tallyb commented 4 years ago

@maxmumford I have released 9.0.12 of the angular compiler which bypasses the dependencies whitelisting. Can you try it?

maxmumford commented 4 years ago

@Tallyb after upgrading to 9.0.12 I could remove the explicit dependency / peerDependency overrides in my package.json and compile the component without angular complaining about dependencies being included in the package. However peer dependencies were still listed as dependencies in bit show.

zwaardje commented 3 years ago

I am still having this issue. Is there a fix for it?

║ Id                │ atoms/button                                       ║
╟───────────────────┼────────────────────────────────────────────────────╢
║ Compiler          │ bit.envs/compilers/angular@9.0.21                  ║
╟───────────────────┼────────────────────────────────────────────────────╢
║ Language          │ javascript                                         ║
╟───────────────────┼────────────────────────────────────────────────────╢
║ Main File         │ src/components/atoms/button/index.ts               ║
╟───────────────────┼────────────────────────────────────────────────────╢
║ Dependencies      │ pargo.black-and-yellow/styles@0.0.1                ║
║                   │ @angular/material@^10.1.3                          ║
║                   │ @storybook/angular@^6.0.20                         ║
╟───────────────────┼────────────────────────────────────────────────────╢
║ Dev Dependencies  │ tslib@>=1.0.0                                      ║
║                   │ webpack-env@>=0.8.0                                ║
║                   │ @angular/core@>= 8.0.0                             ║
║                   │ @angular/common@>= 8.0.0                           ║
╟───────────────────┼────────────────────────────────────────────────────╢
║ Peer Dependencies │ @angular/common@^9.0.0                             ║
║                   │ @angular/core@^9.0.0                               ║
║                   │ @angular/platform-browser@^9.0.0                   ║
║                   │ @angular/router@^9.0.0                             ║
╟───────────────────┼────────────────────────────────────────────────────╢
║ Files             │ src/components/atoms/button/button.html            ║
║                   │ src/components/atoms/button/button.interface.ts    ║
║                   │ src/components/atoms/button/button.scss            ║
║                   │ src/components/atoms/button/button.ts              ║
║                   │ src/components/atoms/button/data/button.mockdata.t ║
║                   │ s                                                  ║
║                   │ src/components/atoms/button/index.ts               ║
║                   │ src/components/atoms/button/package.json           ║
║                   │ src/components/atoms/button/stories/button.stories ║
║                   │ .ts                                                ║
╚═══════════════════╧════════════════════════════════════════════════════╝

button.scss @import "src/assets/scss/base/breakpoints.scss"; @import "src/assets/scss/base/variables.scss"; @import "src/assets/scss/base/colors.scss";

styles: pargo.black-and-yellow/styles@0.0.1

║ Id               │ styles@0.0.1                                       ║
╟──────────────────┼────────────────────────────────────────────────────╢
║ Language         │ javascript                                         ║
╟──────────────────┼────────────────────────────────────────────────────╢
║ Main File        │ src/assets/scss/index.scss                         ║
╟──────────────────┼────────────────────────────────────────────────────╢
║ Dependencies     │                                                    ║
╟──────────────────┼────────────────────────────────────────────────────╢
║ Dev Dependencies │                                                    ║
╟──────────────────┼────────────────────────────────────────────────────╢
║ Files            │ src/assets/scss/base/base.scss                     ║
║                  │ src/assets/scss/base/breakpoints.scss              ║
║                  │ src/assets/scss/base/buttons.scss                  ║
║                  │ src/assets/scss/base/colors.scss                   ║
║                  │ src/assets/scss/base/document.scss                 ║
║                  │ src/assets/scss/base/fonts.scss                    ║
║                  │ src/assets/scss/base/forms.scss                    ║
║                  │ src/assets/scss/base/heading.scss                  ║
║                  │ src/assets/scss/base/icons.scss                    ║
║                  │ src/assets/scss/base/links.scss                    ║
║                  │ src/assets/scss/base/plugins.scss                  ║
║                  │ src/assets/scss/base/typography.scss               ║
║                  │ src/assets/scss/base/variables.scss                ║
║                  │ src/assets/scss/index.scss                         ║
╚══════════════════╧════════════════════════════════════════════════════╝
JoshK2 commented 3 years ago

I saw this issue on ng-packager: https://github.com/ng-packagr/ng-packagr/issues/716 and I want to know if it can be helpful to disable whitelistedNonPeerDependencies? and what can be the side effect of it?

JoshK2 commented 3 years ago

Hi, this issue was fixed by @lifaon74 https://github.com/teambit/envs/pull/154 Please use this version: https://bit.dev/bit/envs/compilers/angular?version=9.0.22