js文件無法正確導入js模塊，即使在HTML上插入type =“ module”

Question

我想將movie.js中的一個js類導入到我打算使用的main.js上的代碼中。 我一直在努力解決以下錯誤：SyntaxError：導入聲明可能只出現在模塊的頂層

我已經將type =“ module”標記放入HTML中，並檢查導入/導出是否在正確的位置。 我看到了類似問題的另一個答案，但沒有一個解決問題。

（這是相關的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;

我希望在控制台中打印該對象，但是現在它僅向我顯示SyntaxError：導入聲明可能僅出現在模塊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”

問題描述

1 個解決方案

解決方案1
1 已采納 2019-06-26 00:40:26

js文件無法正確導入js模塊，即使在HTML上插入type =“ module”

問題描述

1 個解決方案

解決方案1 1 已采納 2019-06-26 00:40:26

解決方案1
1 已采納 2019-06-26 00:40:26