Q&A
前提・実現したいこと
Stimulus をはじめようを参考に、手元で再現しながら学習しようとしているのですが、初っ端からエラーでつまづいてます。
HELLO WORLDの項(codepen)をコピペして次のindex.htmlとhello_controller.jsを作りました。簡易なNginxサーバを立てて、ドキュメントルートに2つのファイルを配置しただけの環境です。ブラウザはChrome
しかし、hello_controller.jsの1行目でUncaught SyntaxError: Cannot use import statement outside a moduleのエラーになりalertは出ません。
何が足りないのでしょうか？
発生している問題・エラーメッセージ
Uncaught SyntaxError: Cannot use import statement outside a module
該当のソースコード
html
1/* index.html */ 2<!DOCTYPE html> 3<html> 4 <head> 5 <meta charset="utf-8"> 6 <script type="module"> 7 import {Controller, Application} from "https://cdn.skypack.dev/stimulus@2.0.0"; 8 </script> 9 <script type="text/javascript" src="hello_controller.js"></script> 10 </head> 11 12 <body> 13 <div data-controller="hello"></div> 14 </body> 15</html>
javascript
1// hello_controller.js 2import {Controller, Application} from "https://cdn.skypack.dev/stimulus@2.0.0"; 3 4let app = Application.start(); 5 6app.register('hello', class extends Controller { 7 connect() { 8 alert('HELLO WORLD') 9 } 10})
試したこと
src="hello_controller.js"をsrc="./hello_controller.js"にしてみたり
補足情報（FW/ツールのバージョンなど）
Google Chrome
バージョン: 97.0.4692.99（Official Build） （arm64）
回答1件
1
ベストアンサー
エラーメッセージのとおりです。
srcで読み込むものについても、importを働かせるにはtype="module"を明記する必要があります。
投稿2022/01/25 05:01
総合スコア142258
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2022/01/28 01:16