Title rewritten as: Expected JavaScript module script, but server responded with MIME types text/html and text/css - no frames, pure JS

Question

I'm trying to use a color calendar and I'm following the tutorials they saw in the demos and documentation like this:

// js/calendar.js

import Calendar from '../node_modules/color-calendar';
import '../node_modules/color-calendar/dist/css/theme-glass.css';

let calA = new Calendar({
  id: "#color-calendar",
  theme: "glass",
  // border: "5px solid black",
  weekdayType: "long-upper",
  monthDisplayType: "long",
  // headerColor: "yellow",
  // headerBackgroundColor: "black",
  calendarSize: "small",
  layoutModifiers: ["month-left-align"],
  eventsData: [
    {
      id: 1,
      name: "French class",
      start: "2020-12-17T06:00:00",
      end: "2020-12-18T20:30:00"
    },
    {
      id: 2,
      name: "Blockchain 101",
      start: "2020-12-20T10:00:00",
      end: "2020-12-20T11:30:00"
    },
    {
      id: 3,
      name: "Cheese 101",
      start: "2020-12-01T10:00:00",
      end: "2020-12-02T11:30:00"
    },
    {
      id: 4,
      name: "Cheese 101",
      start: "2020-12-01T10:00:00",
      end: "2020-12-02T11:30:00"
    }
  ],
  dateChanged: (currentDate, events) => {
    console.log("date change", currentDate, events);
  },
  monthChanged: (currentDate, events) => {
    console.log("month change", currentDate, events);
  }
});

and my HTML:

// dashboard.html
...
<div class="col">
  <div class="calendar-container">
    <div id="color-calendar"></div>
    <div id="events-display"></div>
  </div>
</div>
...
<script type="module" src="js/calendar.js"></script>

I tried using http-server and Live Server extension to check if it solved the problem but the problem persists.

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.

I got these two on my dev tools console

For additional information, this is my package.json

{
  "dependencies": {
    "color-calendar": "^1.0.7",
    "http-server": "^14.1.1"
  }
}

I don't know what to do anymore...no Node.js, no frameworks, just using javascript, html and css.

Answer 1

The solution brought by Konrad and Stefino76 worked.

I installed webpack on my project and configured it to accept js and css in .js files and now the calendar works!

All credit should go to them, but I don't think I can mark their answer as solved.