'Trouble importing topojson-client in vanilla JS

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?



Solution 1:[1]

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!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 MBaas