Historically most of my browser projects have been built with UMD modules. I'm trying to switch over to ESNext.

I'm just trying to import a UMD module, like so:

import {Chart, ChartDataSets, ChartConfiguration} from './com/chart';

Typescript is fine with this, but the browser throws the error: Loading module from [...]/com/chart was blocked because of a disallowed MIME type (“text/html”).

Fine. So I tried it with the js file extension:

import {Chart, ChartDataSets, ChartConfiguration} from './com/chart.js';

I get: Import not found: Chart.

Tried to import the whole thing:

import * as Chart from './com/chart.js';

Chart is not a constructor. Chart.Chart is undefined.

Tried it as a reference type, including a script tag in the HTML:

///<reference types='./com/chart'/>

This isn't ideal, but it worked. However, Typescript doesn't like it:

'Chart' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)

Yeah, I tried adding an import. I'm not clear on something. Why is the module being treated differently when I import it with the .js file extension?