H.service is undefined when using Webpack 5

Question

I am trying to create a very simple webpack 5 project where I am serving an HTML and trying to load a HERE Map. It is a typescript project.

My ts file is:

const main = async () => {
  const H = await import("@here/maps-api-for-javascript");
  console.log(H); //this prints the module object
  console.log(H.service); //this prints undefined
  var platform = new H.service.Platform({
    apikey: "{YOUR_API_KEY}",
  });


  // Obtain the default map types from the platform object
  var maptypes = platform.createDefaultLayers();

  // Instantiate (and display) a map object:
  var map = new H.Map(
    document.getElementById("mapContainer"),
    maptypes.vector.normal.map,
    {
      zoom: 10,
      center: { lng: 13.4, lat: 52.51 },
    }
  );
};

main();

The error, as you can imagine is: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Platform')

My tsconfig.json is:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "esnext",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node"
  }
}

My webpack.common.js file is:

const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  entry: "./src/index.ts",
  mode: "production",
  devtool: "source-map",
  optimization: {
    usedExports: true,
  },
  output: {
    filename: "[name].[contenthash].js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "ts-loader",
          options: {
            // disable type checker - we will use it in fork plugin
            transpileOnly: true,
          },
        },
      },
    ],
  },
  optimization: {
    minimizer: [
      new TerserPlugin({
        exclude: "mapsjs.bundle.js",
      }),
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  plugins: [],
  node: {
    global: false,
  },
};

What am I missing to get this to work? Thank you