javascript - Unable to load fullcalendar library into existing project - Stack Overflow

admin管理员组

文章数量:1392105

I'm trying to integrate the fullcalendar.io library into a plain javascript+html project and I have a hard time with this simple application. This is the error I get:

**

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". 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/html". Strict MIME type checking is enforced for module scripts per HTML spec.

**

Things I've tried: So the first thing I thought the problem is the path since I imported everything dynamically maybe handled and imported it and its dependencies insufficiently, and from plain js I went to page.js plugin, but nothing changed. Then I've thought the webserver is not configured properly, after all I've using express.js, which would be perfect for my scenario for its simplicity. Fighting with this half a day it resulted no solution so went to nginx. The error messages changed nothing. Hovewer somethimes it gave me import errors but I think it is because of the mess I've created in the project.

What else did I tried?

• cleared browser cache
• moved the fullcalendar into a different file, then the file into the root folder.
• Tried in different browsers (Mozilla/Chrome). However in Postman I was able to visualize the calendar.
• I've tried to use the fullcalendar library in a different environment (Plain html+js without webserver. It worked.)

This was the previous webserver with express:

import express from 'express';
import { join, dirname } from 'path';
import path from 'path';
import history from 'connect-history-api-fallback';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const app = express();
const port = 8888;

app.use(express.static(join(__dirname, 'public'), {
  setHeaders: (res, filePath) => {
    if (filePath.endsWith('.js') || filePath.endsWith('.mjs')) {
      res.setHeader('Content-Type', 'application/javascript');
    }
    
    if (filePath.endsWith('.html')) {
      res.setHeader('Content-Type', 'text/html');
    }
  }
}));

app.use(history({index: 'index.html'}));
app.use(express.static(join(__dirname, 'src')));
app.use(express.static(join(__dirname, 'src/views')));
app.use(express.static(join(__dirname, 'src/views/make_appointment')));
app.use(express.static(join(__dirname, 'src/views/appointments')));
app.use(express.static(join(__dirname, 'src/views/users')));
app.use('/node_modules', express.static(path.join(__dirname, 'node_modules')));


app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

And from this I went to nginx:

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;

    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen 8888;
        server_name localhost;

        root I:/pet-appointment/Project-fe/src/;
        index index.html;

        location / {
            try_files $uri /index.html;
        }

        # Serve HTML views
        location /calendar {
            try_files /views/calendar.html /index.html;
        }
        
        types { application/javascript js mjs; }


        # Serve .js files with the correct MIME type
        location ~* \.js$ {
            default_type application/javascript;
            add_header Content-Type application/javascript;
        }

        location /node_modules/ {
            root I:/pet-appointment/Project-fe;
            add_header Content-Type application/javascript;
            autoindex on;
        }


        location ~* \.(js|css|json|ico|png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot|otf|mp4|webm|ogv|ogg)$ {
            add_header Access-Control-Allow-Origin *;
        }
    }
}

The project structure only with the necessary files:

Project/src/views:

• -calendar.html
• -calendar.js

Project/src:

• -index.html
• -navigation_bar.mjs (This used on every page as a component, however I didn't tried without this but I don't think this is the root of problem.)

Calendar.html:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FullCalendar Test</title>
    <script src="./calendar.js"></script>
    <!-- <link rel="stylesheet" href=".1.8/index.global.min.css" /> -->
</head>

<body>
    <div id="calendar"></div>
</body>

</html>

Calendar.js:

import { Calendar } from '/node_modules/@fullcalendar/core';
import interactionPlugin from '/node_modules/@fullcalendar/interaction';
import dayGridPlugin from '/node_modules/@fullcalendar/daygrid';
import timeGridPlugin from '/node_modules/@fullcalendar/timegrid';
import listPlugin from '/node_modules/@fullcalendar/list';

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
  
    var calendar = new Calendar(calendarEl, {
      plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin ],
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      },
      initialDate: '2018-01-12',
      navLinks: true, // can click day/week names to navigate views
      editable: true,
      dayMaxEvents: true, // allow "more" link when too many events
      events: [
        {
          title: 'All Day Event',
          start: '2018-01-01',
        },
        {
          title: 'Long Event',
          start: '2018-01-07',
          end: '2018-01-10'
        },
        {
          groupId: 999,
          title: 'Repeating Event',
          start: '2018-01-09T16:00:00'
        },
        {
          groupId: 999,
          title: 'Repeating Event',
          start: '2018-01-16T16:00:00'
        },
        {
          title: 'Conference',
          start: '2018-01-11',
          end: '2018-01-13'
        },
        {
          title: 'Meeting',
          start: '2018-01-12T10:30:00',
          end: '2018-01-12T12:30:00'
        },
        {
          title: 'Lunch',
          start: '2018-01-12T12:00:00'
        },
        {
          title: 'Meeting',
          start: '2018-01-12T14:30:00'
        },
        {
          title: 'Happy Hour',
          start: '2018-01-12T17:30:00'
        },
        {
          title: 'Dinner',
          start: '2018-01-12T20:00:00'
        },
        {
          title: 'Birthday Party',
          start: '2018-01-13T07:00:00'
        },
        {
          title: 'Click for Google',
          url: '/',
          start: '2018-01-28'
        }
      ]
    });
  
    calendar.render();
  });
  

Index.html:

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

<head>
  <title>Appointments</title>
  <!-- <script src="/router.js"></script> -->

  <link rel="stylesheet" href="/style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="/navigation-bar.mjs" type="text/javascript" defer></script>

  <link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <script src="/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
    crossorigin="anonymous"></script>
    <script src=".4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
    crossorigin="anonymous"></script>
  <link rel="stylesheet" type="text/css" href="/progress_bar.css">
  <!-- <script src="script.js"></script> -->
</head>

<body>
  <header-component></header-component>

  <div id="app"></div>

</body>

</html>

<style>
.bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }

    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }
  .pt-8 {
    padding-top: 8px;
  }

  .center {
    text-align: center;
  }

  .container {
    width: fit-content;
    margin: auto;
  }

  .border {
    border: 1px solid black;
  }

  .success {
    color: green;
  }

  .error {
    color: red;
  }

  
</style>

Package.json:

{"name": "pet-frontend",
  "version": "1.0.0",
  "description": "A JavaScript project",
  "type": "module",
  "main": "./dist/index.js",
  "scripts": {
    "start": "node server.mjs",
    "build": "node ./node_modules/parcel-bundler/bin/cli build ./src/index.html --out-dir ./dist/",
    "lint": "node ./node_modules/eslint/bin/eslint . --ext .js --fix"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "eslint": "^8.57.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.29.1",
    "parcel": "^2.13.3"
  },
  "dependencies": {
    "@fullcalendar/core": "^6.1.15",
    "@fullcalendar/daygrid": "^6.1.15",
    "@fullcalendar/list": "^6.1.15",
    "@fullcalendar/timegrid": "^6.1.15",
    "bootstrap": "^5.3.3",
    "connect-history-api-fallback": "^2.0.0",
    "express": "^4.21.2",
    "fullcalendar": "^6.1.15",
    "page": "^1.11.6"
  }
}

If any other file is necessary feel free to ask. Thank you for your help.

本文标签： javascriptUnable to load fullcalendar library into existing projectStack Overflow