我正在编写香草JavaScript。如果你做同样的事情，只需添加一个type="module"到你的脚本标签。

也就是之前的代码:

<script src="./index.js"></script>

更新后的代码:

<script type="module" src="./index.js"></script>`

如果你想从模块中导入函数。 比方说，main。js定义了func1和func2，你想把它们导入到一个新的模块test.js中

下面将解决这个问题。

main.js:

const func1 = () => {console.log('do sth in func1')};
const func2 = () => {console.log('do sth in func2')};

//at the end of module
//export specific functions here
module.exports = { func1, func2 };

. js:

// import them here
const{ func1, func2} = require('./main.js');
func1();
func2();

当它在Babel转译中失败时发生此错误。

我也面临着同样的问题，直到我在脚本中添加type="module"。

以前是这样的

<script src="../src/main.js"></script>

在把它改成

<script type="module" src="../src/main.js"></script>

它工作得很完美。

我想我应该加上这句话，因为这对我来说并不明显。您需要将type="module"添加到所有脚本包含，而不仅仅是您想用于实用程序文件的脚本包含。

index . html:

<script type="module" src="js/controllers/utils.js"></script>
<script type="module" src="js/controllers/main.js"></script>`

main.js:

import myFunction from './utils.js

utils.js:

export default myFunction

为什么会出现这种情况以及更多可能的原因:

很多接口仍然不理解ES6 JavaScript语法/特性。因此，无论在任何文件或项目中使用ES6，都需要将ES6编译为ES5。

出现SyntaxError:不能在模块外使用import语句错误的可能原因是您试图独立运行该文件。您还没有安装和设置ES6编译器(如Babel)，或者您的runscript中的文件路径是错误的/不是编译文件。

如果你想继续没有编译器，最好的解决方案是使用ES5语法，在你的情况下，这将是var ms = require(./ms.js);。这可以稍后更新为适当或更好的仍然设置你的编译器，并确保你的文件/项目在运行之前编译，也确保你的运行脚本正在运行编译文件，通常命名为dist, build或任何你命名的文件，在你的runscript中编译文件的路径是正确的。