# import errors from d3 using webpack

**URL:** <https://talk.observablehq.com/t/import-errors-from-d3-using-webpack/6799>\
**Category:** Help\
**Created:** [July 13, 2022, 3:01pm UTC](https://talk.observablehq.com/t/import-errors-from-d3-using-webpack/6799 "2022-07-13T15:01:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dwhood](https://avatars.discourse-cdn.com/v4/letter/d/6a8cbe/32.png) [@dwhood](https://talk.observablehq.com/u/dwhood)\
**Post date:** [July 13, 2022, 3:01pm UTC](https://talk.observablehq.com/t/import-errors-from-d3-using-webpack/6799/1 "2022-07-13T15:01:00Z")

</div>

I’m attempting to use the npm package @observablehq/plot in a create-react-app for lighter-weight visualizations on top of the d3 charts I currently having running. I installed the d3 npm package and @observablehq/plot npm package with the following commands:

> npm install d3 --save  
> npm install @observablehq/plot --save

My package.json file lists the following versions:

```
"d3": "^7.6.1",
"@observablehq/plot": "^0.5.2",

```

When I try to actually use observable, I get the following error when trying to compile the create-react-app…

`./node_modules/@observablehq/plot/dist/symbols.js Attempted import error: 'symbolAsterisk' is not exported from 'd3'.`

I don’t want to modify the observable code, and am guessing that I’m using a different version of d3 than I should be. Any thoughts or past experience from the community that could help me?

Thanks for your time and effort!

David

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [July 13, 2022, 3:22pm UTC](https://talk.observablehq.com/t/import-errors-from-d3-using-webpack/6799/2 "2022-07-13T15:22:06Z")

</div>

My guess is that you have multiple versions of d3-shape in your node\_modules, and that the one Plot is loading is 3.0.1 (or earlier) rather than the required 3.1.0 (or later), which added d3.symbolAsterisk.

Unfortunately (due to complicated reasons) the dependencies in [D3’s package.json](https://github.com/d3/d3/blob/main/package.json) are expressed loosely, so even if you install d3@7.6.1, you may get an older version of d3-shape or any other D3 module. For example, if you do something like this, you’ll only get one version of d3-shape (the old version 3.0.1, not 3.1.0):

```auto
npm install d3-shape@3.0.1 --save
npm install d3 --save

```

Try running `npm upgrade` and see if that fixes your problem.

---

<div class="post-metadata">

**Author:** ![dwhood](https://avatars.discourse-cdn.com/v4/letter/d/6a8cbe/32.png) [@dwhood](https://talk.observablehq.com/u/dwhood)\
**Post date:** [July 13, 2022, 4:28pm UTC](https://talk.observablehq.com/t/import-errors-from-d3-using-webpack/6799/3 "2022-07-13T16:28:16Z")

</div>

A sincere thanks for the response and willingness to help me with this issue. It’s pretty exciting to get a message from the co-founder!

Great call…I checked the `node_modules` folder for the version of `d3-shape` installed and it’s indeed version `3.0.1`

I attempted to upgrade npm packages with the following command:

```auto
> npm upgrade

```

I ended up with `eslint` issues, but after getting them resolved (by deleting `package-lock.json` and the `node_modules` folder with a clean `npm install` command) I then stumbled upon this error:

```auto
./node_modules/@observablehq/plot/dist/legends.js 119:10
Module parse failed: Unexpected token (119:10)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| const o = options[key];
| 
> if (o?.legend && key in scales) {
| const legend = value(scales[key], legendOptions(context, scales[key], o), key => scales[key]);
| if (legend != null) legends.push(legend);

```

I’ll do some digging and see what I can come up with this error…

---

<div class="post-metadata">

**Author:** ![dwhood](https://avatars.discourse-cdn.com/v4/letter/d/6a8cbe/32.png) [@dwhood](https://talk.observablehq.com/u/dwhood)\
**Post date:** [July 13, 2022, 5:45pm UTC](https://talk.observablehq.com/t/import-errors-from-d3-using-webpack/6799/4 "2022-07-13T17:45:02Z")

</div>

Quick update…I ended up getting the issues related to babel resolved by following the guidance in this stackoverflow post:

> <https://stackoverflow.com/questions/67552020/how-to-fix-error-failed-to-compile-node-modules-react-leaflet-core-esm-pat>

(repeated here for clarity)

```auto
Steps to fix:-

Open your package.json file and edit your browserslist as follows.

 "browserslist": {
   "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
},
to

"browserslist": [
   ">0.2%",
  "not dead",
  "not op_mini all"
],
Once you've done this, Delete node_modules/.cache directory.

Then try npm install and npm start

```

Overall, upgrading the `d3-shape` package addressed the issues that I had. Thanks again for your help!