import 文を含む JS を HTML から読み込むときは、 <script src="..." type="module"></script> のように type="module" 属性を付けてください。
Like!
importのエラー
Q&A
解決したいこと
JavaScriptで立体を作成する過程でthree.jsからTrackballControlsをインストールして解凍しました。
そこからhtmlファイルを使って起動しようとしたのですが、1行目のimportで『cannot use import statement outside a module』というエラーが出て開けませんでした。
中身は何も弄っていないのでなぜ使用不可なのかよく分かりません。
どなたか教えていただけませんか？
発生している問題・エラー
Trackballcontrol.jsが開けない
自分で試したこと
再インストール・再解凍
0
2Answer
1
Comments
@Hiromi1623
Questioner<script type ="text/javascript" src ="../js/TrackballControls.js" type="module"></script>で起動したのですがエラーが発生しました。
属性ではだめなのでしょうか？- 同名の属性は1つしか存在できません。 type="text/javascript" は消してください。
@Hiromi1623
Questioner消した結果多分読み込めたのですが、『let trackballControls = new THREE.TrackballControls』の文で『THREE.TrackballControls is not a constructor』というエラーが出てしまいました。
特にこだわりがないのであれば、公式リファレンス通りにCDN経由でモジュール展開してみてはいかがでしょうか？
https://threejs.org/docs/index.html#manual/ja/introduction/Installation
以下リファレンスから引用
CDNや静的ホスティングからインストールをする
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.149.0/build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
const scene = new THREE.Scene();
</script>
Like!
Comments
@Hiromi1623
Questionerありがとうございます。この形でやってみようと思いますが、なるべく崩さない形の方法はありますでしょうか？- 「なるべく崩さない形の方法」とはどういう意味でしょうか。
@Hiromi1623
Questioner大幅な改変をしない場合という意味合いです。
自分に提示された資料では元の状態の文で開けるらしいのです。
先に方法を教えていただいた上の方法ではエラーが発生してしまったので。- 「自分に提示された資料」が何かわからないので回答のしようがないです。
「大幅な改変」についても何を元とした話をしているのか不明確です。
「あなたが作成したソースコード（改変前のコード）を質問文等に追記していただき、どこを修正すべきか確認する」であれば可能です。