无法导入节点模块

Question

I would like to implement a project in JS, HTML and CSS.我想用 JS、HTML 和 CSS 实现一个项目。 For this I need a datepicker.为此，我需要一个日期选择器。 I have decided to use vanillajs-datepicker.我决定使用 vanillajs-datepicker。

My webpack.config.js我的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';在我的 app.js 中，我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我的 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我的 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>

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.我在我的 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.如果我删除了对 app.js 的引用，那么它就可以工作了。 Thanks for the comments and answears.感谢您的评论和回答。 And thanks to @esqew!并感谢@esqew！

Answer 1

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.如果您使用webpack将app.js及其依赖项编译为单个bundle.js （如您的配置文件所示），则您不应再在 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).使用像webpack这样的工具的全部webpack是将您的代码及其依赖项提炼到一个缩小的输出文件中（当然，除非您以其他方式对其进行了配置）。

You should revisit webpack 's Getting Started document , which makes explicit mention of this:您应该重新访问webpack的入门文档，其中明确提到了这一点：

[…] 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…. [...] 因为我们要打包我们的脚本，所以我们必须更新我们的index.html文件 [...] 来加载这个包，而不是原始的./src文件...。

Answer 2

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';如果您要返回 3 个目录，请使用import Datepicker from '../../../node_modules/vanillajs-datepicker/js/Datepicker';

无法导入节点模块

问题描述

update更新

Update - Solution更新 - 解决方案

2 个解决方案

解决方案1
0 已采纳 2021-10-31 15:22:05

解决方案2
-1 2021-10-31 01:45:06

无法导入节点模块

问题描述

update更新

Update - Solution更新 - 解决方案

2 个解决方案

解决方案1 0 已采纳 2021-10-31 15:22:05

解决方案2 -1 2021-10-31 01:45:06

解决方案1
0 已采纳 2021-10-31 15:22:05

解决方案2
-1 2021-10-31 01:45:06