Confused by typescript "import" syntax with compiler options: Module, esnext vs commonjs?

Question

I have a typescript project with some mocha tests, that start like so:

import { assert } from "chai";
import "@material/mwc-ripple"; //I want to test a script that uses this

describe("simple test", () => {
    it("works", () => {
    assert.isOk(true)
  });
});

In the mocha tsconfig.test.json, if I set "module": "esnext" I get the following error:

/home/ec2-user/environment/frontend/test-mocha/common/datetime/aaa_aaa_test.ts:1
import { assert } from "chai";
       ^

SyntaxError: Unexpected token {
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    ...

But if I set it to "module": "commonjs" I get this error:

/home/ec2-user/environment/frontend/node_modules/@material/mwc-ripple/mwc-ripple.js:1
import { __decorate } from "tslib";
       ^

SyntaxError: Unexpected token {
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    ...

What is going on and how should I fix it?

Answer 1

Aha I think I've found the culprit!

If I change

import "@material/mwc-ripple";

to

import { Ripple } from "@material/mwc-ripple";

It clears the error. I'm guessing the different import syntax hints to ts-node that the imported file is to be parsed as javascript or typescript. Maybe?