LoginSignup
0
0

More than 5 years have passed since last update.

CDN版のVue.jsとBabelを一緒に使うと上手くいかない(ReferenceError: i is not defined)

Posted at

色々な事情でCDNのVue.jsを使っているのですが、CDN版のBabelを使おうとした場合に上手くいかなかった
ES2015の記法で書いていたのでIE11で動きません。当然と言えば当然なので普段は無視してるんですけど、今回は社内画面じゃなくて社外向けの画面のためIE対応もする必要がありました
CDN版のBabelもある事は知っていたので適応させてみる

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">                                               

new Vue({           
  el: '...',
  components: {     
    fugahoge: ...
  }                 
})                  

</script>

そうしてみると次のエラー。

[Vue warn]: Error in created hook: "ReferenceError: i is not defined"

found in

---> <Fugahoge>

うわ~これ何がエラーなのかわからないやつだ、Fugahogeコンポーネントの中身は読み込まれているのですがリファレンスエラーが起きているのでJSが動きません。
しかも、ブラウザ側で変換してるんでめっちゃ重いんですよこれ。描画速度が0.8秒くらいから1.5秒くらいまで跳ね上がりました(エラー出てる状態だからかもしれないですが)
やっぱり設計的によくないのでCDN版のBabelを使うことは断念。現状この画面以外IE11対応するつもりはないので、気合でES2015記法から古い記法に編集して戻しました。
そもそもCDN版のVue.jsとかBabelは使わない方がいいですね。勉強になりました。

解決策わかる方いましたらお待ちしています。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0