ES6 (ES2015) module imports not working

[ranaalisaeed]

D3 library has to be imported using:
import * as d3Fetch from 'd3-fetch'

Error:

export 'default' (imported as 'd3Fetch') was not found in 'd3-fetch' (possible exports: blob, buffer, csv, dsv, html, image, json, svg, text, tsv, xml)

what is needed to convert to
import d3Fetch from 'd3-fetch'

[ranaalisaeed]

Another way to import that works is:

import { csv } from 'd3-fetch'
csv('/data/output.csv').then(function(data) { 
	console.log('csv', data)
})

[ranaalisaeed]

Two options in tsconfig.json deal with default imports:

"allowSyntheticDefaultImports": true,     /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
"esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */

[ranaalisaeed]

Following are the ways to deal with default imports

1. import * as d3Fetch from 'd3-fetch' --> all exports in d3-fetch will be made available under d3Fetch
2. import { csv } from 'd3-fetch --> only export function csv(){} will be imported and can be used directly without any prefix
3. enable allowSyntheticDefaultImports and esModuleInterop flags in tsconfig.json and then import d3Fetch from 'd3-fetch' will work.