Webpack code-splitting with Typescript when using class modules

Question

I have done a fair bit of searching around and maybe my Google-fu is failing me but I can't seem to find an answer to the following:

We use modules with TypeScript classes in them and everything is working fine until I try and implement code-splitting in webpack.

If I have this:

import { MyClass } from "./myClass"
let thing = new MyClass()
thing.init()

And I want to code-split it, so I try this:

import { MyClass } from "./myClass"

async function load() {
  const x = await import("./myClass")

  let thing:MyClass = new x.MyClass()

  thing.init()
}

load()

And webpack packs it up fine, but I do not get code splitting.

So then I try

//import { MyClass } from "./myClass"
async function load() {
  const x = await import("./myClass")

  let thing:any = new x.MyClass()

  thing.init()
}

load()

This code-splits, but then MyClass is now not typed and I lose any type knowledge in my editor/ide.

I feel like I m missing something simple, but I can't work it out.

Help greatly appreciated.

UPDATE #1 - tsconfig

{
    "compileOnSave": true,
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "alwaysStrict": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "listFiles": false,
        "module": "esnext",
        "moduleResolution": "node",
        "noEmitHelpers": true,
        "noEmitOnError": false,
        "noFallthroughCasesInSwitch": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noImplicitAny": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "outDir": "js",
        "removeComments": false,
        "sourceMap": true,
        "strictFunctionTypes": true,
        "strictNullChecks": true,
        "target": "es2017",
        "typeRoots": ["../node_modules/@types", "../typings"]
    },
    "exclude": ["../node_modules", "js/**/*"],
    "include": ["ts/**/*.ts", "../typings/globals/*.d.ts"]
}