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

Ionic Framework
1

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!

2

import { menuController } from ‘https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/index.esm.js’;

3

Typically, this is not the setup that we recommend. Even in situation where there is no framework, having some sort of build tool in place to help manage dependencies like this make the process much smoother. I would recommend looking at something like snowpack or rollup to handle this.