无法导入vanillajs-datepicker node模块，浏览器报404及MIME类型错误

我计划使用JS、HTML、CSS实现一个项目，需要用到日期选择器，因此决定采用vanillajs-datepicker。

我的webpack.config.js配置如下：

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './resource/js/app.js',
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js',
    },
};

我在app.js中编写了导入语句：import Datepicker from './../../node_modules/vanillajs-datepicker/js/Datepicker';

浏览器控制台输出如下错误：

GET http://localhost:8080/node_modules/vanillajs-datepicker/js/Datepicker
[HTTP/1.1 404 Not Found 2ms]

Loading failed for the module with source "http://localhost:8080/node_modules/vanillajs-datepicker/js/Datepicker". localhost:8080:31:1
Loading module from "http://localhost:8080/node_modules/vanillajs-datepicker/js/Datepicker" was blocked because of a disallowed MIME type ("text/html").

补充信息 #

我的app.js完整代码：

import Datepicker from './../../node_modules/vanillajs-datepicker/js/Datepicker';

const elem = document.querySelector('input[name="dp"]');
const datepicker = new Datepicker(elem, {
    autohide: true,
    buttonClass: "text-gray-500",
    title: 'db'
});

我的index.html代码：

<!doctype html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/css/datepicker.min.css">
</head>

<body>
    <h1>title</h1>
    <input type="text" name="dp" class="w-5 h-5 text-gray-500 w-full">

    <script src="js/app.js" lang="text/javascript" type="module"></script>
    <script src="bundle.js" lang="text/javascript" type="module"></script>
</body>

请问是什么原因导致的错误？

解决方案 #

问题出在操作环节。根源是HTML中同时引用了未编译的源码和打包后的文件：

<script src="js/app.js" lang="text/javascript" type="module"></script>
    <script src="bundle.js" lang="text/javascript" type="module"></script>
</body>

删除app.js的引用后问题就解决了。

内容的提问来源于stack exchange，提问作者Maik Lowrey