Q&A
前提・実現したいこと
最新のコード
現在railsでアプリを開発してるのですが、
フッターをvue.jsで実装して、試しにお問合せフォームを実装したいです。
発生している問題・エラーメッセージ
Uncaught SyntaxError: Unexpected token '!' footer-8d6d494….js:210
とエラーが出ました。
application.html.erbで
<%= javascript_pack_tag 'footer' %>
を呼び出した時のエラーだと思います。
文法エラーとのことはわかっているのですが、!の部分がエラー表示されてる意味がわかりません。
https://qiita.com/naoki85/items/51a8b0f2cbf949d08b11
こちらの記事の「コンポーネントを使ってヘッダーを作成」を参考にして、footer部分にvueの画面を表示させようとしました。
該当のソースコード
application.html.erb
<!DOCTYPE html> <html> <head> <title><%=full_title(yield(:title)) %></title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= favicon_link_tag('favicon.ico')%> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css"> <meta name=”viewport” content=”width=device-width, initial-scale=1”> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="js/jquery.bgswitcher.js"></script> <script type="text/javascript" src="https://js.pay.jp/v1/"></script> <%= stylesheet_link_tag 'application', media: 'all' %> <%= javascript_pack_tag 'application' %> </head> <body> <%= render 'shared/header'%> <div class="main-wrapper"> <%= yield %> </div> <%#= debug(params) if Rails.env.development? %> <footer id="footer"> <navbar></navbar> <router-view></router-view> <%# vue.js側でこのタグとコンポーネントを紐付ける %> <%= render 'shared/footer'%> </footer> <%= javascript_pack_tag 'footer' %> </body> </html>
footer.js
import Vue from 'vue/dist/vue/vue.esm.js' import Router from './router/router' import footer from './components/footer.vue' var app = new Vue({ router: Router, el: '#footer', components: { 'navbar': footer, } });
footer.vue
<template> <div> <p>これが、フッター部分に表示して欲しい</p> </div> </template>
試したこと
書写しのミスとか、パスのミスを記事と比べて探しましたが、わかりません
JavaScriptを期待しているところにHTMLが帰ってきて、ブラウザが<!DOCTYPE html> をJavaScriptとして解析しようとして!がUnexpected tokenと判定されているように思いました。
とのご意見をいただきました。
<footer id="footer"> <%# vue.js側でこのタグとコンポーネントを紐付ける %> <%= render 'shared/footer'%> </footer>
application.html.erbで以前は、この中にvueに関する記述があったので、ledsunがおっしゃるようなことが起こっているのかな、と思い、
_footer.html.erbに
<div class="footer"> <router-view></router-view> <navbar></navbar> <%= javascript_pack_tag 'footer' %> <div> <%= link_to "お問い合せ", "/contact"%> </div> <div> <%= link_to "私たちについて", "#"%> </div> <div> <%= link_to "コーヒーをもっと知る", ""%> </div> <div> <%= link_to "Coffee Passport とは", "/about_coffee_passport"%> </div> </div>
試しに、こんな感じで呼び出したのですが、
Uncaught SyntaxError: Unexpected token ‘!’
こういう感じでエラーが起きてしまいました。
また、hello_vueの時はUncaught SyntaxError: Unexpected token ‘!’
とならないのに、自作で作ったfooter.jsはを、application.html.erbで
<%=javascript_pack_tag 'footer'%>
と呼び出しても
、Uncaught SyntaxError: Unexpected token ‘!’となってしまいます
hello_vueが上手くいってるのだから、hello_vueの記述をパクればいいと思い、
footer.jsを
import Vue from 'vue/dist/vue/vue.esm.js' import Router from './router/router' import footer from './components/footer.vue' import App from '../app.vue' var app = new Vue({ router: Router, el: '#footer', components: { 'navbar': footer, } }); document.addEventListener('DOMContentLoaded', () => { const app = new Vue({ render: h => h(App) }).$mount() document.body.appendChild(app.$el) console.log(app) })
をこんな感じにしても、エラー内容は変わらずでした。
どうしたら<!DOCTYPE HTML>
の!に反応せずに済むのでしょうか
補足情報（FW/ツールのバージョンなど）
Docker上で開発してます。Docker version 20.10.5,
回答1件
0
ベストアンサー
import Vue from 'vue/dist/vue/vue.esm.js'
これが存在しないみたいです。
import Vue from 'vue/dist/vue.esm.js'
に変更してください。
Uncaught SyntaxError: Unexpected token '!' footer-8d6d494….js:210
上記のfooter-8d6d494….js:210 をクリックすると
var app = new !(function webpackMissingModule() { var e = new Error("Cannot find module 'vue/dist/vue/vue.esm.js'")
"Cannot find module 'vue/dist/vue/vue.esm.js'" と書いてありました。
投稿2021/04/07 12:51
総合スコア2090
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/04/07 13:04
2021/04/07 13:09
2021/04/07 13:13
2021/04/07 13:15
2021/04/07 13:25