Hey guys I can't seem to use import/export correctly on my vanilla js file. I've read a couple of tutorials and don't know what i'm doing wrong..
Here's my Javascript:
import * as d3 from 'https://unpkg.com/d3?module';
import * as topojson from "topojson-client";
const width = 975;
const height = 610;
const path = d3.geoPath();
const svg = d3.create('svg')
.attr('height', height)
.attr('width', width);
const statesBackground = svg.append('path')
.attr('fill', "none")
.attr('d', path(topojson.feature(us, us.objects.nation)))
const stateBorders = svg.append('path')
.attr('fill', 'none')
.attr('stroke', '#fff')
.attr('stroke-linejoin', 'round')
.attr('stroke-linecap', 'round');
document.body.appendChild(svg.node())
and here's my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="scripts.js" type="module"></script>
</body>
</html>
I read that you want to include type="module" within your script tag for module syntax to work. However, it still didn't work, so I tried git init then 'npm install topojson-client.' I get this error: Uncaught TypeError: Failed to resolve module specifier "topojson-client". Relative references must start with either "/", "./", or "../".
Anyone know what i'm doing wrong?
Not sure if it helps after 4 months, but I was dealing with the same issue (albeit for a different library). Found out that switching from Firefox (which report the issue) to Chrome solved the problem - no issues at all in Chrome!