Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[NDS-629] Clean up console warnings #282

Merged
merged 10 commits into from Apr 25, 2019
Merged

[NDS-629] Clean up console warnings #282

merged 10 commits into from Apr 25, 2019

Conversation

matthewlyle
Copy link
Contributor

The problem

We had a very noisy console when interacting with Yarn.

yarn install v1.13.0
[1/5] πŸ”  Validating package.json...
[2/5] πŸ”  Resolving packages...
[3/5] 🚚  Fetching packages...
warning @brainly/html-sketchapp@4.2.0: The engine "sketch" appears to be invalid.
[4/5] πŸ”—  Linking dependencies...
warning " > @nulogy/components@0.5.2" has unmet peer dependency "react@^16.3.2".
warning " > @nulogy/components@0.5.2" has unmet peer dependency "react-dom@^16.3.2".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components > @storybook/react@4.1.13" has unmet peer dependency "babel-loader@^7.0.0 || ^8.0.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components > eslint-config-airbnb@17.1.0" has unmet peer dependency "eslint@^4.19.1 || ^5.3.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components > eslint-config-airbnb@17.1.0" has unmet peer dependency "eslint-plugin-import@^2.14.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components > eslint-config-airbnb@17.1.0" has unmet peer dependency "eslint-plugin-jsx-a11y@^6.1.1".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components > eslint-config-airbnb@17.1.0" has unmet peer dependency "eslint-plugin-react@^7.11.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components > eslint-import-resolver-webpack@0.11.0" has unmet peer dependency "eslint-plugin-import@>=1.4.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components > jest-styled-components@6.3.1" has incorrect peer dependency "styled-components@^2.0.0 || ^3.0.2".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components-e2e > @babel/preset-react@7.0.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components-e2e > babel-loader@8.0.5" has unmet peer dependency "@babel/core@^7.0.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components-e2e > babel-loader@8.0.5" has unmet peer dependency "webpack@>=2".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components > @storybook/react > @storybook/core@4.1.13" has unmet peer dependency "babel-loader@^7.0.0 || ^8.0.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components > eslint-config-airbnb > eslint-config-airbnb-base@13.1.0" has unmet peer dependency "eslint@^4.19.1 || ^5.3.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components > eslint-config-airbnb > eslint-config-airbnb-base@13.1.0" has unmet peer dependency "eslint-plugin-import@^2.14.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components-e2e > @babel/preset-react > @babel/plugin-transform-react-display-name@7.2.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components-e2e > @babel/preset-react > @babel/plugin-transform-react-jsx@7.3.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components-e2e > @babel/preset-react > @babel/plugin-transform-react-jsx-self@7.2.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components-e2e > @babel/preset-react > @babel/plugin-transform-react-jsx-source@7.2.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/docs > gatsby > eslint-plugin-graphql@2.1.1" has incorrect peer dependency "graphql@^0.12.0 || ^0.13.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/docs > gatsby > express-graphql@0.6.12" has incorrect peer dependency "graphql@^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/docs > gatsby > graphql-tools@3.1.1" has incorrect peer dependency "graphql@^0.13.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/docs > gatsby-plugin-netlify > webpack-assets-manifest@3.1.1" has unmet peer dependency "webpack@>=4.4.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components > @storybook/addon-backgrounds > @emotion/styled > @emotion/styled-base@0.10.6" has unmet peer dependency "@emotion/core@0.x.x".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components-e2e > @babel/preset-react > @babel/plugin-transform-react-jsx > @babel/plugin-syntax-jsx@7.2.0" has unmet peer dependency "@babel/core@^7.0.0-0".

These warnings were caused by several different issues, outlined below:

Unmet peer depdencies

NPM/Yarn doesn't automatically install peer dependencies anymore as of version 3. This means when something specifies a peer dependency, you have to also add it to your project's dev dependencies.

Plugins are now starting to include this in their installation instructions, e.g Airbnb's eslint config (More info on dependencies)

These need to be solved two ways:

In packages we're using

warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components > @storybook/react@4.1.13" has unmet peer dependency "babel-loader@^7.0.0 || ^8.0.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components > eslint-config-airbnb@17.1.0" has unmet peer dependency "eslint@^4.19.1 || ^5.3.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components > eslint-config-airbnb@17.1.0" has unmet peer dependency "eslint-plugin-import@^2.14.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components > eslint-config-airbnb@17.1.0" has unmet peer dependency "eslint-plugin-jsx-a11y@^6.1.1".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components > eslint-config-airbnb@17.1.0" has unmet peer dependency "eslint-plugin-react@^7.11.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components > eslint-import-resolver-webpack@0.11.0" has unmet peer dependency "eslint-plugin-import@>=1.4.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components > eslint-config-airbnb > eslint-config-airbnb-base@13.1.0" has unmet peer dependency "eslint@^4.19.1 || ^5.3.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components > eslint-config-airbnb > eslint-config-airbnb-base@13.1.0" has unmet peer dependency "eslint-plugin-import@^2.14.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components > @storybook/react > @storybook/core@4.1.13" has unmet peer dependency "babel-loader@^7.0.0 || ^8.0.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components-e2e > @babel/preset-react@7.0.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components-e2e > babel-loader@8.0.5" has unmet peer dependency "@babel/core@^7.0.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components-e2e > babel-loader@8.0.5" has unmet peer dependency "webpack@>=2".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components-e2e > @babel/preset-react > @babel/plugin-transform-react-display-name@7.2.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components-e2e > @babel/preset-react > @babel/plugin-transform-react-jsx@7.3.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components-e2e > @babel/preset-react > @babel/plugin-transform-react-jsx-self@7.2.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components-e2e > @babel/preset-react > @babel/plugin-transform-react-jsx-source@7.2.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/components-e2e > @babel/preset-react > @babel/plugin-transform-react-jsx > @babel/plugin-syntax-jsx@7.2.0" has unmet peer dependency "@babel/core@^7.0.0-0".

In packages we're using directly, we need to include their peer deps in our dev deps. The majority of our warnings came from Airbnb and Babel's React preset and loader so I installed those dependencies to the appropriate project.

In peer dependencies in packages we're using

warning "workspace-aggregator-429628fb-5f1d-4aa3-8eb0-581ea0ca34b0 > @nulogy/components > jest-styled-components@6.3.1" has incorrect peer dependency "styled-components@^2.0.0 || ^3.0.2".
warning "workspace-aggregator-429628fb-5f1d-4aa3-8eb0-581ea0ca34b0 > @nulogy/components > @storybook/addon-backgrounds > @emotion/styled > @emotion/styled-base@0.10.6" has unmet peer dependency "@emotion/core@0.x.x".

Warnings in nested packages need to be fixed by package authors.

They are both currently being fixed by package authors:

Gatsby incorrect peer dependencies

warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/docs > gatsby > eslint-plugin-graphql@2.1.1" has incorrect peer dependency "graphql@^0.12.0 || ^0.13.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/docs > gatsby > express-graphql@0.6.12" has incorrect peer dependency "graphql@^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/docs > gatsby > graphql-tools@3.1.1" has incorrect peer dependency "graphql@^0.13.0".
warning "workspace-aggregator-686f6754-3b2e-4cc4-9d88-5d33b0ff66b6 > @nulogy/docs > gatsby-plugin-netlify > webpack-assets-manifest@3.1.1" has unmet peer dependency "webpack@>=4.4.0".

These were an issue with the version of Gatsby we were using and were solved with an upgrade.

The engine sketch appears to be invalid

warning @brainly/html-sketchapp@4.2.0: The engine "sketch" appears to be invalid.

This is a relic from the story2sketch prototyping we did a long time ago. I removed all of those dependencies as we aren't using that.

Root React dependency

warning " > @nulogy/components@0.5.2" has unmet peer dependency "react@^16.3.2".
warning " > @nulogy/components@0.5.2" has unmet peer dependency "react-dom@^16.3.2".

Yarn gave us this warning until I added react and react-dom to the root package.json. I'm not confident this was the right solution, but it didn't seem to break anything. Would like some feedback here if there's a better way to accomplish this.

Expected current state

When using a yarn command you should only see the following warnings:

yarn install v1.13.0
[1/5] πŸ”  Validating package.json...
[2/5] πŸ”  Resolving packages...
[3/5] 🚚  Fetching packages...
[4/5] πŸ”—  Linking dependencies...
warning "workspace-aggregator-429628fb-5f1d-4aa3-8eb0-581ea0ca34b0 > @nulogy/components > jest-styled-components@6.3.1" has incorrect peer dependency "styled-components@^2.0.0 || ^3.0.2".
warning "workspace-aggregator-429628fb-5f1d-4aa3-8eb0-581ea0ca34b0 > @nulogy/components > @storybook/addon-backgrounds > @emotion/styled > @emotion/styled-base@0.10.6" has unmet peer dependency "@emotion/core@0.x.x".
[5/5] πŸ”¨  Building fresh packages...
✨  Done in 24.19s.

One warning should go away with the next minor version update, and the other will go away when we upgrade to Storybook v5.

To prevent in the future

We just need to pay attention when adding new plugins to see if there's additional work to include their peer dependencies and add those at the same time. It only got so noisy because we weren't doing this and so a few things added up.

@matthewlyle matthewlyle requested review from clemensp and removed request for clemensp April 22, 2019 19:20
@matthewlyle matthewlyle changed the title [NDS-629] Clean up console warnings [wip do not review] Apr 22, 2019
@matthewlyle
Copy link
Contributor Author

matthewlyle commented Apr 25, 2019

Getting the following errors when trying to test this branch:

> yarn test
yarn run v1.13.0
$ yarn lint && yarn jest
$ yarn run eslint
$ eslint --config .eslintrc './**/*.js'

/Users/mattd/src/design-system/components/src/index.js
   4:1  error  Dependency cycle detected  import/no-cycle
   5:1  error  Dependency cycle detected  import/no-cycle
   6:1  error  Dependency cycle detected  import/no-cycle
   7:1  error  Dependency cycle detected  import/no-cycle
   8:1  error  Dependency cycle detected  import/no-cycle
   9:1  error  Dependency cycle detected  import/no-cycle
  14:1  error  Dependency cycle detected  import/no-cycle
  15:1  error  Dependency cycle detected  import/no-cycle
  16:1  error  Dependency cycle detected  import/no-cycle
  17:1  error  Dependency cycle detected  import/no-cycle
  18:1  error  Dependency cycle detected  import/no-cycle
  19:1  error  Dependency cycle detected  import/no-cycle
  20:1  error  Dependency cycle detected  import/no-cycle
  21:1  error  Dependency cycle detected  import/no-cycle
  22:1  error  Dependency cycle detected  import/no-cycle
  23:1  error  Dependency cycle detected  import/no-cycle
  24:1  error  Dependency cycle detected  import/no-cycle
  25:1  error  Dependency cycle detected  import/no-cycle
  26:1  error  Dependency cycle detected  import/no-cycle
  27:1  error  Dependency cycle detected  import/no-cycle
  28:1  error  Dependency cycle detected  import/no-cycle
  29:1  error  Dependency cycle detected  import/no-cycle
  30:1  error  Dependency cycle detected  import/no-cycle
  31:1  error  Dependency cycle detected  import/no-cycle
  32:1  error  Dependency cycle detected  import/no-cycle
  34:1  error  Dependency cycle detected  import/no-cycle
  35:1  error  Dependency cycle detected  import/no-cycle
  36:1  error  Dependency cycle detected  import/no-cycle
  37:1  error  Dependency cycle detected  import/no-cycle

/Users/mattd/src/design-system/components/src/Type/Headings.js
  2:1  error  Dependency cycle detected  import/no-cycle

βœ– 30 problems (30 errors, 0 warnings)

@matthewlyle matthewlyle changed the title [wip do not review] [NDS-629] Clean up console warnings Apr 25, 2019
@clemensp clemensp merged commit 58e1c2c into master Apr 25, 2019
@clemensp clemensp deleted the peer-deps branch April 25, 2019 20:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants