Develop Reference

Why does my D3 code break when I set the script type to module?

I am working on a project built with Javascrpt, jQuery, and Vite.js. My colleague built a data visualization using D3 - a US states map - that I need to implement in the project on a specific page. They built the component using test data, my job is basically to load the component onto a page passing it actual returned data from an API call.
Everything in the test project works perfectly, but when I tried to implement this code into a script file in the project - literally copying and pasting from the working version - I got an error saying certain properties could not be read. After failing to debug for sometime, I randomly tried removing type="module" from the script tag link in HTML, and boom, everything worked. Does anyone have an idea of why this would be? I cannot get this code to run when the script type is set to module, except I need the script type to be set to module since I'm importing lots of components for other aspects of the page.
With the way the CodePen is set up, I couldn't replicate the issue since the HTML and JS files are automatically linked. But if you copy this code into your editor, and then in the html, set the the JS file to a module ` You'll see the issue.
Thanks. I'm at a total loss for what to do here. I could put all the D3 code in it's own script file, but then I have no way pass it variables from other files if it's not a module.

Per the comments, the following lines in my original code were not working in strict mode:
this.uStates = uStates;
this.uStatePaths = uStatePaths;
The fix was simple, I just needed to write the following instead:
window.uStates = uStates;
window.uStatePaths = uStatePaths;

Using third party library TypeScript

I'm new to TypeScript and I'm trying to use a regular library that was written in vanilla JavaScript but I'm getting an error when trying to execute the code.
index.ts:
import OpenSubtitles from 'opensubtitles-api';
new OpenSubtitles;
when trying to node dist/index.js:
new opensubtitles_api_1.default;
TypeError: opensubtitles_api_1.default is not a constructor
edit:
It has nothing to do with the duplicated thread as this one is related to TypeScript and not ES6 itself, and the other thread is talking about old JavaScript syntax compatibility with ES6 but the library I'm trying to link is written in ES6 (using classes and so on, so that is not a duplicated thread).

How to go about utilizing acorn.js in another .js file?

I'm trying to write a Javascript translator using a Javascript parser called "acorn.js." I'm writing my code in Sublime using a Node build system. Calling the following line:
require("./acorn.js");
produces no errors, but whenever I attempt to access any functions within that file, an undefined error is thrown. Is there any way I can import or reference this library to gain access to its functions without having to utilize a JQuery import or something of the like?
Here is the answer:
var test = acorn.parse("var x;");
And if you're using this specific library, what is returned is an AST of the contents of what you parse. In this case, it's the string "var x;".

You have to assign the imported module to a variable. For ex :
var acorn = require("./acorn.js");
And access the methods from that variable :
acorn.parse(in,out);

Google Caja: Sample html4 def file?

I'm trying to implement this Introduction Tutorial to sanitize HTML using Caja's JSHtmlSanitizer.
I'm getting a reference is not defined error at line 1056 in html-sanitizer.js because the variable html4 is undefined. I believe this is a definition file. Where can I can get a sample of this definition file? I think I found a very old def file that dates back in 2008 and it's no longer in the latest version of the repo.

The HTML defs file is built from the schema JSON by Caja's build system. The minimum build operation is:
$ ant pluginc
which will leave the built file at ant-lib/com/google/caja/plugin/html4-defs.js.

Uncaught TypeError with Handlebars.js

I am using Handlebars.js with precompiled templates. I have the following code (using JQuery in the first line):
$('#'+id).append('<script src="'+widgetContext.templateDir+
template+'.tmpl">');
console.log(Handlebars);
console.log(Handlebars.templates);
var html = Handlebars.templates[template](data);
I get the following at the console:
The 'widget_container' template file definitely exists in the location specified. I've also tried with both the standard handelbars.js and handelbars.runtime.js.
Any idea what is going on here or how to fix the error?
Update: it appears to work if the HTML is on the same domain as the javascript file and templates but not if it isn't, so something to do with the same origin policy? I'm trying the handlebars require.js plugin here https://github.com/SlexAxton/require-handlebars-plugin but having problems getting it working.

I solved this using:
The text plugin for require.js and loading the handlebars templates as text files
The optimizeAllPluginResources build option for r.js
Getting a very recently updated version of require.js/r.js which fixed a bug with the
optimizeAllPluginResources build option
A rather horrible use of eval to run the template file code - would still be nice to avoid this
Still not quite sure exactly what was going on with the undefined Handlebars.templates though.