Project cannot locate imported d3-graphviz module

Question

The project is located at https://github.com/eric-g-97477/blog-ember-d3 which is a fork of this project.

The output of npm list is:

$ npm list                                                                                                                                                                                                                          
[email protected]
├── @ember/[email protected]
├── @ember/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

I am trying to import by doing:

import { graphviz } from "d3-graphviz";

and that generates the error:

Uncaught Error: Could not find module `d3-graphviz` imported from `blog-ember-d3/libs/donut-chart`

I am sure this is something silly, but I am not sure what has gone wrong.

My goal was to start with a d3 based project that worked and determine how to get d3-graphviz working within it.

Answer 1

If you add ember-auto-import, you should be able to import from d3-graphviz. ember-auto-import sets up webpack and allows things to "just work" from npm, and is standard in all ember apps since ember-cli 3.16

Also, if you're starting a new app, you may want to update ember-cli so you get the latest blueprint.

npm install -g ember-cli@latest