Encountering errors in browsers' console when utilizing d3.select() in typescript code. Despite trying alternative methods like d3-timer.now(), the issue persists.
As a newcomer to typescript, I am utilizing intelliJ Ultimate 2019.1. Through npm, I have downloaded numerous packages, resulting in the node_modules directory displaying various dependencies such as .bin, @types, commander, d3, d3-array, d3-selection, and more.
IntelliJ seamlessly displays javadoc-like documentation in its Documentation view, indicating a smooth linkage with the types. :-)
// index.html
<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8>
<title>My title>
<script>var exports = {};</script>
<script type=module src=ts1.js></script>
</head>
<body>
<p>test output from me</p>
</body>
</html>
// ts1.ts
import * as d3 from 'd3';
import * as d3selector from 'd3-selection'; // Potentially problematic?
let d:d3.Primitive = 'hello'; // Functions smoothly! :-) Demonstrating typescript functionality
console.log(d.toString()); // Similarly functioning. :-)
d3.select("p").style("fill", "red"); // Triggers error
d3selector.select("p").style("fill", "red"); // Sparks error
// tsconfig.json (confusing to me)
{
"compilerOptions": {
"target": "es6",
"sourceMap": true
},
"exclude": [
"node_modules"
]
}
No relief from the d3-selection module in the following file
// package.json
{
"name": "T5D3",
"version": "1.0.0",
"dependencies": {
"d3": "^5.7.1",
"d3-selection": "^1.4.0"
},
"devDependencies": {
"@types/d3": "^5.7.1"
}
}
A common error message in Firefox and Chrome console states "Uncaught TypeError: Failed to resolve module specifier "d3". Relative references must start with either "/", "./", or "../"." This only occurs when attempting to utilize d3.select or d3selector.select. Various attempts to include necessary prefixes have proven futile.