import errors from d3 using webpack

Community Help
1

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

2

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 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):

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

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

1 Like
3

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:

> 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:

./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…

4

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

(repeated here for clarity)

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!

2 Likes