js 文件没有正确导入 js 模块，即使在 html 上插入了 type="module"

Question

我在 movie.js 中有一个 js class，我想将其导入我计划在 main.js 上使用它的代码。我一直在努力解决以下错误：语法错误：导入声明只能出现在模块的顶层

我已经将 type="module" 标签放入 HTML 并检查 import/export 是否在正确的位置。我看到了类似问题的另一个答案，但是 none 解决了这个问题。

(这是相关的HTML)

<html>
 <head>
  <script src='main.js' async></script>
  <script src='movie.js' type="module" ></script>
 </head>
 <body>
  <a class="btn">Search</a>
 </body>
</html>

import Movie from './movie.js';

const btnSearch = document.querySelector(".btn");


btnSearch.addEventListener('click', function () {
    let filmeTeste = new Movie("The Lego Movie", 2014, "tt1490017", "Movie", "https://m.media-amazon.com/images/M/MV5BMTg4MDk1ODExN15BMl5BanBnXkFtZTgwNzIyNjg3MDE@._V1_SX300.jpg");
    console.log(`object test ${filmeTeste}`);
});

class Movie {
    constructor(title, year, imdbID, type, poster){
        this.title = title;
        this.year = year;
        this.imdbID = imdbID;
        this.type = type;
        this.poster = poster;
    };
}
export default Movie;

我希望在控制台中打印对象，但现在它只显示语法错误：导入声明可能只出现在模块的顶层main.js:1

Answer 1

您还需要将 type="module" 添加到您的其他 <script> 标签，因为它也使用模块。

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

js 文件没有正确导入 js 模块，即使在 html 上插入了 type="module"

js file doesn't import a js module correctly, even with type="module" inserted on the html

html

javascript

object

ecmascript-6

es6-class