SyntaxError: Cannot use import statement outside a moduleというエラーが出る

発生している問題・エラーメッセージ

Javascriptのライブラリをimportしようとしたところ、以下のエラーが発生します。（ちなみにimportしたいライブラリはsnd-libというものです。https://github.com/snd-lib ）
解決方法を教えていただけると幸いです。

SyntaxError: Cannot use import statement outside a module

該当のソースコード

main.js
1import Snd from 'snd-lib';
2// 以下略

index.html
1<!DOCTYPE html>
2<html>
3    <head>
4        <script src="main.js"></script>
5    </head>
6    <body>
7// 略
8    </body>
9</html>

試したこと

以下のコマンドで、パッケージのインストールは行いました。

npm install snd-lib

行動規範の内容に同意します

回答2件

単純にモジュールを指定していないだけでは？

投稿2023/02/20 06:36

yambejp

総合スコア116810

ekito_station

2023/02/21 05:32

回答ありがとうございます。基本的な質問になってしまいすみません、こちらでモジュールを指定していることにはならないでしょうか？ ``` import Snd from 'snd-lib'; ```

yambejp

2023/02/21 05:34

外部スクリプトはどうなっていて、どういうスクリプトタグで呼んでいますか？

ekito_station

2023/02/21 05:46

ソースコードの方をより詳しく修正いたしました。（お答えになっているか分かりませんが）「import Snd from 'snd-lib';」と記述したJSファイルを、外部スクリプトとしてindex.htmlで読み込んでいます。

yambejp

2023/02/21 05:52

main.jsの前にsnd-libをscriptタグで呼ばなくて良いのですか？

行動規範の内容に同意します

２つ原因があるかと、、

・コマンドでインストールする場合(--saveがない)
＄npm install lib --save

・import Snd from 'snd-lib';でエラーが発生する場合
importされるファイルが、CommonJS形式に変換されないため起きている可能性があります。(以下参照：https://qiita.com/masato_makino/items/269617904a7660c85edd)
jest.config.jsでtransformIgnorePatternsとtransformフィールドを追加して、tsconfig.jsonにallowJs : trueを追加でどうでしょう。

まず、両方試してみてください。

投稿2023/02/20 07:55