未捕获的SyntaxError：请求的模块“./add.js”没有提供名为“add”的导出项

Question

未捕获的SyntaxError：请求的模块“./add.js”没有提供名为“add”的导出项

43

我正在尝试学习ES6的导入和导出，但是我遇到了一个错误，它不让我导入我的模块。我还尝试过import .. from 'add.js'，没有使用./，但仍然没有成功。

Uncaught SyntaxError: 请求的模块 './add.js' 没有提供名为 'add' 的导出

我的文件夹结构如下所示

C:\xampp\htdocs\es6\import.export\
- index.html
- app.js
- add.js

index.html

<html>
    <head>
        <script type="module" src="app.js"></script>
    </head>

    <body>

    </body>
</html>

app.js

import { add } from './add.js'

console.log(add(2,3))

add.js

export default function add (a, b) {
// export default function (a, b) { <-- does not work either, same error
    return a + b;
}

- Liga

6

看到了export default吗？那就是默认导出，而不是具名导出。 - CertainPerformance

1

仍然不起作用。我将其更改为导出默认函数（a，b）。 - Liga

1

移除 "default"，否则它将成为默认导出而不是命名导出。 - CertainPerformance

6

使用 import add from './add.js'。 - Şivā SankĂr

1

可能是[Javascript（ES6），export const vs export default]的重复问题(https://dev59.com/3FwX5IYBdhLWcg3wnwcy)。 - adiga

2个回答

36

有两种导出方式：命名导出（每个模块可以有多个）和默认导出（每个模块只能有一个）。可以同时使用两种导出方式，但最好分开使用。如果要导入模块的默认内容，则不需要使用花括号“{}”：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export

你可以使用花括号'{}'来进行命名导出：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_named_exports

- Zak

7

这个答案是误导性的。你使用了短语“如果你有默认导出”，但是“export”发生在模块的代码中，而不是导入者的代码中。模块中是否有“default”并不影响“你不应该使用{}”这一点。重要的是导入者的意图。因此，这应该更像是：“如果你想导入模块的默认值，就不使用大括号“{}”，因为它们表示您想按名称导入。” - IAM_AL_X

你说得对！我没有考虑到具有多个导出的类。我会更新我的答案。谢谢@IAM_AL_X - Zak

嗯...我们注意到Chromium的导入行为非常不一致。有时它不接受带大括号的导入，而有时则需要这些。其他条件保持不变。 - Vega4

1

实际上，有时候即使在同一目录下的另一个模块中使用相同语法的导入也无法正常工作，而且没有任何明显的原因，因此你最终只能尝试各种可能性，看哪个可以在特定文件中正常工作。听起来很疯狂，但确实如此。 - Vega4

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- molamk · Accepted Answer

选项1

给你的导出命名而不要使用默认值default。它应该是这个样子的

// add.js
export const add =  (a, b) =>  a + b;
// OR
// export const add = function(a, b) { return a+b };

// app.js
import { add } from './add';

选项2

使用export default语法。它的格式如下：

// add.js
export default function add(a, b) {
  return a + b;
}

// app.js
import add from './add';