Parcel: D3 code not working with Parcel

[yichuan1118]

🐛 bug report

A simple D3 code is not working as expected when bundled using Parcel. parcel build index.html

When using parcel index.html, the code will not work unless I resave the index.js.

Please see the following repo for reproduction: https://github.com/yichuan1118/parcel_d3_debug

🎛 Configuration (.babelrc, package.json, cli command)

no extra config
{
"name": "debug",
"version": "1.0.0",
"private": true,
"dependencies": {
"d3": "^5.7.0"
}
}

🤔 Expected Behavior

three blue dot should show up (in <script src="//d3js.org/d3.v5.js"></script> in html files

😯 Current Behavior

nothing shows up in

💻 Code Sample

https://github.com/yichuan1118/parcel_d3_debug

🌍 Your Environment

⟩ parcel --version

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel |1.9.7
| Node |v10.10.0
| npm/Yarn |6.4.1
| Operating System |osx 10.13.2

[peanutbother]

I tested your code.
This has nothing to do with parcel but your usage of D3.
D3 starts before the DOM has finished loading so there is no <div id"map"></div>

You can test this by putting your code in a setTimeout with a little delay.
I will post a pull-request for your code at your repo to show what I mean.

Again - this is not a parcel issue.

[yichuan1118]

I see thank you for the insight!

[59023g]

Or add an event listener to the document so the chart renders after the DOM is loaded.

For example: document.addEventListener('DOMContentLoaded', renderChart)

[peanutbother]

Or add an event listener to the document so the chart renders after the DOM is loaded.

For example: document.addEventListener('DOMContentLoaded', renderChart)

This is what I basically told them in my PR in their repo there.

[brianzelip]

For others with a similar but different problem, if you're importing the d3 standalone library like:

import d3 from 'd3-polygon'

The error is something like:

TypeError: o.default is undefined

This is because the standalone npm installed library doesn't have a default export, so the answer is to import all of the library's exports, like:

import * as d3 from 'd3-polygon'