Not able to import a node module-CodePudding

I would like to implement a project in JS, HTML and CSS. For this I need a datepicker. I have decided to use vanillajs-datepicker.

My 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',
    },
};

In my app.js I make the import Datepicker from './../../node_modules/vanillajs-datepicker/js/Datepicker';

In the browser console I get the following error message:

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").

update

my 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'
});

my 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/[email protected]/dist/css/datepicker.min.css">
</head>

<body>
    <h1>title</h1>
    <input type="text" name="dp" >

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

What went wrong?

Update - Solution

As is so often the case, the error is in front of the keyboard.

The problem was. I discreetly referenced the uncompiled source code in my HTML.

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

If i deleted the reference to app.js then it works. Thanks for the comments and answears. And thanks to @esqew!

CodePudding user response：

If you’re using webpack to compile app.js and its dependencies into a single bundle.js (as your configuration file would indicate), you should no longer be referencing any of the uncompiled source in your HTML. The whole point of using a tool like webpack is to distill your code and its dependencies into a single minified output file (except of course in the case when you’ve configured it otherwise).

You should revisit webpack’s Getting Started document, which makes explicit mention of this:

[…] since we'll be bundling our scripts, we have to update our index.html file […] to load the bundle, instead of the raw ./src file….

CodePudding user response：

Looks like your import statement has a typo

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

'./' is used for a file in the same directory. If you're going back 3 directories use import Datepicker from '../../../node_modules/vanillajs-datepicker/js/Datepicker';