es6 import syntax example?

[brownieboy]

I think that there's should be an example on the Readme for how to import the library using the es6 import syntax. E.g., neither of these syntaxes works:

import d3 from "d3-collection";  // Doesn't work
import { d3 }  from "d3-collection";  //  Doesn't work either

There's no error given but the d3 variable is always undefined.

After some hunting around, I finally found a syntax that does work :

import * as d3 from "d3-collection"; // does work

but this was far from obvious, for me at least!

[pembeci]

Actually, there may be a general page about how to import and use these d3 mini modules for different environments and each module reference can point to that general page at the beginning. Instead of a seperate page, section Supported Environments on d3 wiki homepage can be also used.

[jimmont]

es6 and es2015 modules will not work with d3 because d3 has chosen to use rollup instead.

you can either use rollup or make all the text substitutions yourself using a script or manually. I use a perl one-liner because I dislike rollup and the extra dependencies were breaking between node 8 and node 10. it is unbelievably strange that this is necessary but I also haven't been supporting a kitchen sink of module loaders.

import * as d3 from "./node_modules/d3-something/index.js"

which has content like export {default as something} from './src/thing'. because these files do not use the natively supported syntax with a full relative path (it's missing the actual file extension), it won't work without rollup or whatever making these corrections. multiple popular projects have made this same decision to require extra modules to work properly and forego native support.

see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

[mbostock]

es6 and es2015 modules will not work with d3 because d3 has chosen to use rollup instead.

Yes and no.

Rollup takes ES modules as input, and you can consume those ES modules directly (unbundled) without Rollup if you’re in an environment that supports ES modules.

But Rollup uses a “relaxed” definition of ES modules in regards to the import specifiers (the paths). Part of this is out of necessity—the ES module specification explicitly disallows bare import specifiers; there’s no way to import … from "d3-array" to load a dependency from node_modules. (That doesn’t apply to d3-collection since it has no dependencies.) But also the D3 modules also omit the .js extension on most import specifiers.

For example, unpkg supports this relaxed definition of ES modules and rewrites the import specifiers to absolute paths, making them compatible with browsers and the specification:

<script type="module">

import * as d3 from "https://unpkg.com/d3-collection?module";

console.log(d3);

</script>

[jimmont]

Regarding the missing file extensions perhaps consider a comment about this scenario in Nodejs: https://youtu.be/M3BM9TB-8yA?t=837
And please note that supporting Rollup via unpkg effectively and currently makes these a requirement to use d3 with imports.