Could not resolve

[josuevalrob]

Describe/explain the bug A clear and concise description of what the bug is. Dependencies:

         "@nivo/core": "0.80.0",
         "@nivo/pie": "0.80.0",
         "prop-types": "15.8.1",

OUTPUT:

  VITE v4.3.9  ready in 1144 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
  ➜  press h to show help
✘ [ERROR] Could not resolve "d3-scale"

    ../../.yarn/__virtual__/@nivo-legends-virtual-74b3f43347/0/cache/@nivo-legends-npm-0.80.0-74759e3d6a-659aba3510.zip/node_modules/@nivo/legends/dist/nivo-legends.es.js:1:78:
      1 │ ... e}from"react/jsx-runtime";import{scaleLinear as i}from"d3-scale";import{getValueFormatter as n,useTheme as o,degreesToR...
        ╵                                                           ~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "d3-scale" here because it's not listed as a
  dependency of this package:

    ../../.pnp.cjs:3945:33:
      3945 │           "packageDependencies": [\
           ╵                                  ~~

  You can mark the path "d3-scale" as external to exclude it from the bundle, which will remove this
  error.

✘ [ERROR] Could not resolve "@nivo/tooltip"

    ../../.yarn/__virtual__/@nivo-core-virtual-93786fda48/0/cache/@nivo-core-npm-0.80.0-e4f763d5ca-05fd9ccc9d.zip/node_modules/@nivo/core/dist/nivo-core.es.js:1:334:
      1 │ ...ltipActionsContext as g,TooltipStateContext as m}from"@nivo/tooltip";import b from"lodash/merge";import y from"lodash/ge...
        ╵                                                         ~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest says this package has a peer dependency on "@nivo/tooltip", but the
  package "@nivo/tooltip" has not been installed:

    ../../.pnp.cjs:3908:30:
      3908 │             ["@nivo/tooltip", null],\
           ╵                               ~~~~

  You can mark the path "@nivo/tooltip" as external to exclude it from the bundle, which will remove
  this error.

✘ [ERROR] Could not resolve "@nivo/colors"

    ../../.yarn/__virtual__/@nivo-legends-virtual-74b3f43347/0/cache/@nivo-legends-npm-0.80.0-74759e3d6a-659aba3510.zip/node_modules/@nivo/legends/dist/nivo-legends.es.js:1:226:
      1 │ ...mport{computeContinuousColorScaleColorStops as l}from"@nivo/colors";import*as a from"react";import{Fragment as c,useStat...
        ╵                                                         ~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@nivo/colors" here because it's not listed as a
  dependency of this package:

    ../../.pnp.cjs:3945:33:
      3945 │           "packageDependencies": [\
           ╵                                  ~~

  You can mark the path "@nivo/colors" as external to exclude it from the bundle, which will remove
  this error.

✘ [ERROR] Could not resolve "prop-types"

    ../../.yarn/__virtual__/@nivo-colors-virtual-5883e7b107/0/cache/@nivo-colors-npm-0.80.0-e044ed736c-0dc2044c98.zip/node_modules/@nivo/colors/dist/nivo-colors.es.js:1:1669:
      1 │ ..."react";import{rgb as ke}from"d3-color";import ze from"prop-types";import{scaleSequential as Ae,scaleDiverging as je,sca...
        ╵                                                          ~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest says this package has a peer dependency on "prop-types", but the
  package "prop-types" has not been installed:

    ../../.pnp.cjs:3881:27:
      3881 │             ["prop-types", null],\
           ╵                            ~~~~

  You can mark the path "prop-types" as external to exclude it from the bundle, which will remove
  this error.

✘ [ERROR] Could not resolve "prop-types"

    ../../.yarn/__virtual__/@nivo-legends-virtual-74b3f43347/0/cache/@nivo-legends-npm-0.80.0-74759e3d6a-659aba3510.zip/node_modules/@nivo/legends/dist/nivo-legends.es.js:1:355:
      1 │ ...seCallback as d,useMemo as h}from"react";import g from"prop-types";var m=function(e){var i=e.x,n=e.y,o=e.size,r=e.fill,l...
        ╵                                                          ~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest says this package has a peer dependency on "prop-types", but the
  package "prop-types" has not been installed:

    ../../.pnp.cjs:3951:27:
      3951 │             ["prop-types", null],\
           ╵                            ~~~~

  You can mark the path "prop-types" as external to exclude it from the bundle, which will remove
  this error.

What am I missing? Im just trying: import { ResponsivePie } from '@nivo/pie'

Following the answer from: https://github.com/pluvial/svelte-adapter-deno/issues/14#issuecomment-987225812

I am trying:

...
ssr: {
        external: ['d3-scale', '@nivo/tooltip', '@nivo/colors', 'prop-types'],
    },

But not luck 🥲

[plouc]

@josuevalrob, dependencies were improperly expressed in previous versions, this should have been fixed by https://github.com/plouc/nivo/pull/2313.

[josuevalrob]

Thanks @plouc I just update dependencies to:

"@nivo/core": "0.83.0",
"@nivo/pie": "0.83.0",
"prop-types": "15.8.1",

and now the only issue is related to proptypes:

✘ [ERROR] Could not resolve "prop-types"

    ../../.yarn/__virtual__/@nivo-core-virtual-2ff1c79afe/0/cache/@nivo-core-npm-0.83.0-00880afd53-d60e262679.zip/node_modules/@nivo/core/dist/nivo-core.es.js:1:200:
      1 │ ...eElement as d,Component as u}from"react";import c from"prop-types";import{TooltipProvider as f,Tooltip as p,useTooltipHa...
        ╵                                                          ~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest says this package has a peer dependency on "prop-types", but the
  package "prop-types" has not been installed:

    ../../.pnp.cjs:8836:27:
      8836 │             ["prop-types", null],\
           ╵                            ~~~~

  You can mark the path "prop-types" as external to exclude it from the bundle, which will remove
  this error.

✘ [ERROR] Could not resolve "prop-types"

    ../../.yarn/__virtual__/@nivo-core-virtual-d05b4cfbb2/0/cache/@nivo-core-npm-0.83.0-00880afd53-d60e262679.zip/node_modules/@nivo/core/dist/nivo-core.es.js:1:200:
      1 │ ...eElement as d,Component as u}from"react";import c from"prop-types";import{TooltipProvider as f,Tooltip as p,useTooltipHa...
        ╵                                                          ~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest says this package has a peer dependency on "prop-types", but the
  package "prop-types" has not been installed:

    ../../.pnp.cjs:8807:27:
      8807 │             ["prop-types", null],\
           ╵                            ~~~~

  You can mark the path "prop-types" as external to exclude it from the bundle, which will remove
  this error.

/Users/josue.valencia/Projects/the-dock-client/.yarn/unplugged/esbuild-npm-0.17.19-f690397756/node_modules/esbuild/lib/main.js:1636
  let error = new Error(`${text}${summary}`);
              ^

What could be wrong?

[plouc]

I don't know, the message is strange:

The Yarn Plug'n'Play manifest says this package has a peer dependency on "prop-types", but the package "prop-types" has not been installed:

While you specified it in your deps, I don't have enough experience with yarn pnp, but I don't think it's directly related to nivo.

[Nxtmaster10]

I have a similar issue:

    "@nivo/calendar": "^0.83.0",
    "@nivo/core": "^0.83.0",
    "prop-types": "^15.8.1",

Using Next.JS 13.4.7:

<ResponsiveTimeRange
        data={data.flat()}
        from={new Date(new Date().setMonth(0, 0))}
        to={new Date(new Date().setMonth(11, 31))}
        isInteractive={true}
      />

Error:

./node_modules/@nivo/colors/dist/nivo-colors.cjs.js:1:13
Module not found: ESM packages (d3-color) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@nivo/legends/dist/nivo-legends.cjs.js
./node_modules/@nivo/calendar/dist/nivo-calendar.cjs.js
./src/components/yearlyLeave.tsx

[Nxtmaster10]

@plouc would you prefer a separate issue for my problem?

[plouc]

@Nxtmaster10, the last error regarding d3-color already has a specific issue: https://github.com/plouc/nivo/issues/2310

[jdsalchow]

Fwiw: I had a similar issue and solved it by yarn add prop-types

[LIMPIX31]

I have solved this problem by package extensions in .yarnrn.yml

packageExtensions:
  "@nivo/core@*":
    dependencies:
      prop-types: "*"
      '@nivo/tooltip': '*'
  '@nivo/legends@*':
    dependencies:
      d3-scale: '*'
      '@nivo/colors': '*'

[ruslanguns]

Fixed this problem adding:

 // next.config.js
 
  experimental: {
    esmExternals: 'loose',
  },

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!