简体   繁体   English

Javascript 导入 package 无法解析模块说明符

[英]Javascript import package Failed to resolve module specifier

I am trying to import a module I have downloaded with npm.我正在尝试导入使用 npm 下载的模块。

My json file is:我的 json 文件是:

{
  "name": "nodejs-web-app1",
  "version": "0.0.0",
  "description": "NodejsWebApp1",
  "main": "server.js",
  "author": {
    "name": ""
  },
  "dependencies": {
    "fs": "^0.0.1-security",
    "http": "^0.0.1-security",
    "node-pandas": "^1.0.5",
    "node-static": "^0.7.11",
    "require": "^2.4.20",
  },
}

I have my html file:我有我的 html 文件:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Home</title>
    <script type="module" src="functions.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <h1>Dashboard</h1>
    <p>Welcome!</p>
    <button onclick="scraper()">CLICK</button>
    <label id="label">Reponse</label>
</body>

</html>

my functions.js file我的functions.js文件

import pd from 'node-pandas';
function scraper() {
    const s = pd.Series([1, 9, 2, 6, 7, -8, 4, -3, 0, 5])
    console.log(s);
    document.getElementById('label').innerHTML = 'A computer science portal for geeks';
}

and my server.js file:和我的 server.js 文件:

var nStatic = require('node-static');
var http = require('http');
var fs = require('fs');
var port = process.env.PORT || 8080;

var file = new nStatic.Server(__dirname);

http.createServer(function (req, res) {
    file.serve(req, res);
}).listen(port);

But when running the code I have the error但是在运行代码时出现错误

Uncaught TypeError: Failed to resolve module specifier "node-pandas".未捕获的类型错误:无法解析模块说明符“node-pandas”。 Relative references must start with either "/", "./", or "../".相对引用必须以“/”、“./”或“../”开头。

I tried but it gives another error also.我试过了,但它也给出了另一个错误。

If I write:如果我写:

import pd from './node-pandas';

or或者

import pd from '../node-pandas';

I get:我得到:

GET http://localhost:1337/node-pandas net::ERR_ABORTED 404 (Not Found) GET http://localhost:1337/node-pandas net::ERR_ABORTED 404(未找到)

My project has this structure:我的项目有这样的结构:

  • myproject我的项目
    • server.js服务器.js
    • functions.js函数.js
    • index.html索引.html
    • package.json package.json
    • node_modules节点模块
      • node-pandas节点熊猫

And I am using visual studio 2019我正在使用 Visual Studio 2019

Any idea what I am doing wrong please?知道我做错了什么吗?

I had the exact same issue (I'm a total beginner).我有完全相同的问题(我是一个完全的初学者)。

I installed via NPM a dependency and within that project they were using import statement like我通过 NPM 安装了一个依赖项,并且在该项目中他们使用了类似的导入语句

import pd from './node-pandas';

instead of代替

import pd from './node-pandas.js';

So I had a situation where Live Server was hosting the javascript file on "http://localhost/scriptname.js" while the project was looking for that file instead on "http://localhost/scriptname" (without the.js extension)所以我遇到了这样一种情况,Live Server 在“http://localhost/scriptname.js”上托管 javascript 文件,而项目正在“http://localhost/scriptname”上寻找该文件(没有 .js 扩展名) )

I could off course add.js to the import statement, but then I would have to do that for ALL the import statements on all the files of this external project.我当然可以将.js 添加到 import 语句中,但是我必须为此外部项目的所有文件上的所有 import 语句执行此操作。

It's strange that there is not a lot of information about this error, but in summary:奇怪的是没有很多关于这个错误的信息,但总结一下:

  • There exists something as Module Specifiers and Relative Import References: https://sbcode.net/threejs/module-specifiers/存在模块说明符和相对导入参考: https://sbcode.net/threejs/module-specifiers/
  • You can only use relative import references.您只能使用相对导入引用。 If you want to use Module Specifiers, you need a tool to resolve those如果要使用模块说明符,则需要一个工具来解决这些问题
  • An example of such tool is WebPack.这种工具的一个例子是 WebPack。 It will resolve all these import statement for you and generate one javascript file instead that you can add to your html file instead它将为您解析所有这些导入语句并生成一个 javascript 文件,而不是您可以将其添加到 html 文件中
import pd from './node-pandas';

Also Check that do you have any default exports in your node-pandas or not.还要检查你的 node-pandas 中是否有任何默认导出。 If there is no default export in that case you have to use如果在这种情况下没有默认导出,您必须使用

import { moduleName } from './node-pandas';

Here module name would be exact same name by which it's exported and for multiple imports you should seperate them using comma这里的模块名称将与其导出的名称完全相同,对于多个导入,您应该使用逗号分隔它们

Hope this solve your query希望这能解决您的查询

const pd = require("node-pandas")

Using require instead of import keyword might work as import is es6 and es7 specific使用 require 代替 import 关键字可能会起作用,因为 import 是 es6 和 es7 特定的
on the other hand require is supported by regular js as of in Node projects另一方面,在 Node 项目中,常规 js 支持 require

You need to provide the relative path to the module like 'assets/node-pandas/dist/node-pandas'您需要提供模块的相对路径,例如“assets/node-pandas/dist/node-pandas”

import pd from 'node-pandas';

## Here node-pandas module is in some kind of root directory ## ## 这里 node-pandas 模块位于某种根目录中 ##

I advise using./ or../ before your module name, Provided information is not enough to provide an solution我建议在您的模块名称之前使用./ 或../,提供的信息不足以提供解决方案

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 无法解析模块说明符 - Failed to resolve module specifier 在 ES6 中导入包:“无法解析模块说明符“vue”” - importing a package in ES6: "Failed to resolve module specifier "vue"" 无法解析模块说明符 thre - Failed to resolve module specifier thre 未捕获的类型错误:无法解析 Javascript 中的模块说明符“uuid” - Uncaught TypeError: Failed to resolve module specifier "uuid" in Javascript “不能在模块外使用导入语句”后跟“未捕获的类型错误:无法解析模块说明符” - 'Cannot use import statement outside a module' followed by 'Uncaught TypeError: Failed to resolve module specifier' 未捕获的类型错误:无法解析模块说明符 - Uncaught TypeError: Failed to resolve module specifier 无法解析模块说明符“stimulus-autocomplete” - Failed to resolve module specifier "stimulus-autocomplete" 截至 137 无法解析模块说明符“三” - Failed to resolve module specifier "three" as of 137 无法解析模块说明符“firebase/app” - Failed to resolve module specifier "firebase/app" 无法将 Stimulus 组件导入我的 Rails 应用程序:Uncaught TypeError: Failed to resolve module specifier - Can't import a Stimulus component to my Rails application: Uncaught TypeError: Failed to resolve module specifier
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM