Cannot find modules or corresponding type declarations after fresh install

Grafana Installation
1

What happened:
I expect VSCode to find type declarations for front end dependencies. Also, yarn installation produces numerous peer dependency errors

Example:

Screen Shot 2021-11-18 at 3.22.01 PM
Screen Shot 2021-11-18 at 3.22.01 PM1806×346 66.9 KB

OS: macOS Monterey
Node: v16.13.0
yarn: v3.1.0
VSCode: v1.62.3

Steps to reproduce:

  1. git clone https://github.com/grafana/grafana.git
  2. cd /grafana (root)
  3. yarn install --immutable

Output:
➤ YN0000: ┌ Resolution step
➤ YN0002: │ @grafana-plugins/input-datasource@workspace:plugins-bundled/internal/input-datasource doesn’t provide typescript (p1bd50), requested by ts-loader
➤ YN0002: │ @grafana/runtime@workspace:packages/grafana-runtime doesn’t provide @testing-library/dom (pe71b2), requested by @testing-library/user-event
➤ YN0002: │ @grafana/runtime@workspace:packages/grafana-runtime doesn’t provide react-dom (p66ce2), requested by @testing-library/react
➤ YN0060: │ @grafana/toolkit@workspace:packages/grafana-toolkit provides webpack (pb6a54) with version 4.41.5, which doesn’t satisfy what react-dev-utils and some of its descendants request
➤ YN0002: │ @grafana/ui@workspace:packages/grafana-ui doesn’t provide postcss (pd50a0), requested by postcss-loader
➤ YN0060: │ @grafana/ui@workspace:packages/grafana-ui provides react (p76b5b) with version 17.0.1, which doesn’t satisfy what @storybook/addon-docs and some of its descendants request
➤ YN0060: │ @grafana/ui@workspace:packages/grafana-ui provides react (pe172b) with version 17.0.1, which doesn’t satisfy what @wojtekmaj/enzyme-adapter-react-17 and some of its descendants request
➤ YN0060: │ @grafana/ui@workspace:packages/grafana-ui provides react (pabba8) with version 17.0.1, which doesn’t satisfy what react-window requests
➤ YN0060: │ @grafana/ui@workspace:packages/grafana-ui provides react-dom (pff035) with version 17.0.1, which doesn’t satisfy what @storybook/addon-docs and some of its descendants request
➤ YN0060: │ @grafana/ui@workspace:packages/grafana-ui provides react-dom (p4adb3) with version 17.0.1, which doesn’t satisfy what react-window requests
➤ YN0002: │ @grafana/ui@workspace:packages/grafana-ui doesn’t provide slate-react (pad553), requested by @grafana/slate-react
➤ YN0060: │ @grafana/ui@workspace:packages/grafana-ui provides webpack (p7a4cf) with version 5.58.1, which doesn’t satisfy what @storybook/addon-docs and some of its descendants request
➤ YN0060: │ @grafana/ui@workspace:packages/grafana-ui provides webpack (p944e0) with version 5.58.1, which doesn’t satisfy what react-docgen-typescript-loader and some of its descendants request
➤ YN0060: │ @grafana/ui@workspace:packages/grafana-ui provides webpack (p5a2a2) with version 5.58.1, which doesn’t satisfy what webpack-filter-warnings-plugin requests
➤ YN0060: │ @jaegertracing/jaeger-ui-components@workspace:packages/jaeger-ui-components provides react (p50047) with version 17.0.1, which doesn’t satisfy what react-icons and some of its descendants request
➤ YN0060: │ @jaegertracing/jaeger-ui-components@workspace:packages/jaeger-ui-components provides react (p0b0bb) with version 17.0.1, which doesn’t satisfy what recompose requests
➤ YN0060: │ @jaegertracing/jaeger-ui-components@workspace:packages/jaeger-ui-components provides react-dom (pcc44e) with version 17.0.1, which doesn’t satisfy what react-icons and some of its descendants request
➤ YN0002: │ @storybook/addon-docs@npm:6.3.7 [8174f] doesn’t provide @storybook/manager-webpack5 (pfa868), requested by @storybook/core
➤ YN0060: │ @storybook/builder-webpack4@npm:6.3.7 [75c7e] provides webpack (p49a0e) with version 4.46.0, which doesn’t satisfy what react-dev-utils requests
➤ YN0060: │ @storybook/builder-webpack4@npm:6.3.7 [84880] provides webpack (p587cf) with version 4.46.0, which doesn’t satisfy what react-dev-utils requests
➤ YN0060: │ @storybook/builder-webpack5@npm:6.3.7 [8174f] provides webpack (pff755) with version 5.60.0, which doesn’t satisfy what react-dev-utils and some of its descendants request
➤ YN0060: │ @storybook/react@npm:6.3.7 [8174f] provides webpack (pdbf24) with version 5.58.1, which doesn’t satisfy what @storybook/core and some of its descendants request
➤ YN0060: │ @storybook/react@npm:6.3.7 [8174f] provides webpack (pbe2d0) with version 5.58.1, which doesn’t satisfy what react-dev-utils and some of its descendants request
➤ YN0060: │ grafana@workspace:. provides @testing-library/dom (p511dd) with version 8.10.1, which doesn’t satisfy what testing-library-selector requests
➤ YN0060: │ grafana@workspace:. provides monaco-editor (pe80c3) with version 0.27.0, which doesn’t satisfy what @kusto/monaco-kusto requests
➤ YN0060: │ grafana@workspace:. provides react (pf426e) with version 17.0.1, which doesn’t satisfy what react-diff-viewer requests
➤ YN0060: │ grafana@workspace:. provides react (pdc554) with version 17.0.1, which doesn’t satisfy what react-split-pane requests
➤ YN0060: │ grafana@workspace:. provides react (p537bf) with version 17.0.1, which doesn’t satisfy what react-virtualized-auto-sizer requests
➤ YN0060: │ grafana@workspace:. provides react (p4196a) with version 17.0.1, which doesn’t satisfy what react-window requests
➤ YN0060: │ grafana@workspace:. provides react-dom (p69390) with version 17.0.1, which doesn’t satisfy what react-diff-viewer requests
➤ YN0060: │ grafana@workspace:. provides react-dom (p7e29b) with version 17.0.1, which doesn’t satisfy what react-split-pane requests
➤ YN0060: │ grafana@workspace:. provides react-dom (pb2eec) with version 17.0.1, which doesn’t satisfy what react-virtualized-auto-sizer requests
➤ YN0060: │ grafana@workspace:. provides react-dom (p879b0) with version 17.0.1, which doesn’t satisfy what react-window requests
➤ YN0002: │ grafana@workspace:. doesn’t provide slate-react (paf63d), requested by @grafana/slate-react
➤ YN0002: │ lint-staged@npm:12.0.2 doesn’t provide enquirer (p61bde), requested by listr2
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements for details, where is the six-letter p-prefixed code
➤ YN0000: └ Completed in 0s 716ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 2s 273ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed in 0s 678ms
➤ YN0000: Done with warnings in 4s 422ms

1 Like
2

If anyone encountered this problem while setting up their local dev environment, this is how I solved it.

The issue is to related how to VSCode is configured to run yarn v2+ plug-and-play TypeScript. When doing a vanilla install, you will notice that these imports will fail even though Grafana starts up normally - this is because Grafana is configured to work with yarn IDE SDKs. So VSCode needs to be configured to support them, if it isn’t already.

  1. Note in the Grafana repo, the package manager is declared in package.json. This is the version you should have on your machine

    “packageManager”: “yarn@3.1.0”

  2. Install and set latest yarn version

    yarn set version latest

  3. Install yarn’s IDE SDK for VSCode (the dlx command runs yarn in a separate environment, distinct from the workspace)

    yarn dlx @yarnpkg/sdks vscode

  4. Restart VSCode
2 Likes