[Bug Report] cannot resolve lodash

[kalaivaniraju]

There is a package conflict while importing lodash/debounce.

Reproducible example:

import "./App.css";
import { Dendrogram, DendrogramTree } from "@chsk/band";

function App() {
  return (
    <div className="App">
      <Dendrogram
        data={[
          {
            height: [0.25, 0.5, 0.75, 1],
            id: "data",
            keys: ["alpha", "beta", "gamma", "delta", "epsilon"],
            merge: [
              [-1, -2],
              [-4, -5],
              [-3, 2],
              [1, 3],
            ],
          },
        ]}
        variant="bottom"
      >
        <DendrogramTree />
      </Dendrogram>
      ;
    </div>
  );
}

export default App;

npm list output:

├── @chsk/band@0.6.0
├── @chsk/core@0.6.0
├── @testing-library/jest-dom@5.17.0
├── @testing-library/react@13.4.0
├── @testing-library/user-event@13.5.0
├── @types/jest@27.5.2
├── @types/node@16.18.96
├── @types/react-dom@18.2.25
├── @types/react@18.2.79
├── react-dom@18.2.0
├── react-scripts@5.0.1
├── react@18.2.0
├── typescript@4.9.5
└── web-vitals@2.1.4

Error:

Failed to compile.

Module not found: Error: Can't resolve 'lodash/debounce' in '.../node_modules/@chsk/core/dist'
Did you mean 'debounce.js'?
BREAKING CHANGE: The request 'lodash/debounce' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@chsk/core/dist/chsk-core.es.js 7:0-32
Module not found: Error: Can't resolve 'lodash/debounce' in '.../node_modules/@chsk/core/dist'
Did you mean 'debounce.js'?
BREAKING CHANGE: The request 'lodash/debounce' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

webpack compiled with 1 error
No issues found.

Node version: v20.11.0

[tkonopka]

Hi @kalaivaniraju. Thanks for raising this. I'll look into it at the weekend and get back to you

[tkonopka]

Hi @kalaivaniraju and thanks again for reporting.

There is a new release with a fix - please can you try version 0.8.0 of the chsk packages?

As an aside, when drawing the dendrogram, make sure to include that component within a Chart component. See this codesandbox with an example

[kalaivaniraju]

Okay great, I will try tomorrow and report back.