How to fix 'Uncaught TypeError: Failed to resolve module specifier "@ionic/core". Relative references must start with either "/", "./", or "../".'

Hello! I am trying to use Ionic in my VanillaJS project (no framework). The components work but I had this problem when I tried the Ionic Menu. I just copied the codes from https://ionicframework.com/docs/api/menu. I get this error whenever I run the code:

index.html:1 Uncaught TypeError: Failed to resolve module specifier “@ionic/core”. Relative references must start with either “/”, “./”, or “…/”.

What I did was I replaced import { menuController } from "@ionic/core"; to import { menuController } from "./@ionic/core"; and then copy and pasted the @ionic/core folder from my node_modules. Now I get this error:

Failed to load module script: The server responded with a non-JavaScript MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec.

Here is my index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ionic App</title>
</head>

<body>
  <ion-app>

    <ion-menu side="start" menu-id="first" content-id="main">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Start Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>

    <ion-menu side="start" menu-id="custom" class="my-custom-menu" content-id="main">
      <ion-header>
        <ion-toolbar color="tertiary">
          <ion-title>Custom Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>

    <ion-menu side="end" type="push" content-id="main">
      <ion-header>
        <ion-toolbar color="danger">
          <ion-title>End Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>

    <div class="ion-page" id="main">
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu - Basic</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">
        <ion-button expand="block" onclick="openFirst()">Open Start Menu</ion-button>
        <ion-button expand="block" onclick="openEnd()">Open End Menu</ion-button>
        <ion-button expand="block" onclick="openCustom()">Open Custom Menu</ion-button>
      </ion-content>
    </div>

  </ion-app>

  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
  <script nomodule="" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />

  <script type="module">
    import {
      menuController
    } from "@ionic/core";
    window.menuController = menuController;
  </script>

  <script>
    function openFirst() {
      menuController.enable(true, 'first');
      menuController.open('first');
    }

    function openEnd() {
      menuController.open('end');
    }

    function openCustom() {
      menuController.enable(true, 'custom');
      menuController.open('custom');
    }
  </script>
</body>

</html>

Your help will be so much appreciated. Thank you!