Q&A前提
Laravelを使ったフロントの学習をしております。
Laravel MixとVueでUIを作ろうとしているのですが、
とりあえずTypeScriptで最小構成のコンポーネントを作ろうとしたらエラーになりました。
JavaScriptだと動くのですがどうしても原因がわからず、ご教示お願いいたします。
実現したいこと
- コンポーネントが動くようにしたい
発生している問題・エラーメッセージ
ERROR in ./resources/js/admin/banner.vue?vue&type=template&id=c58f512c&ts=true (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/admin/banner.vue?vue&type=template&id=c58f512c&ts=true) Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /home/Desktop/PHP/PHPRoot/Shout/resources/js/admin/banner.vue: Unexpected token, expected "," (3:27) 1 | import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue" 2 | > 3 | export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) { | ^ 4 | return (_openBlock(), _createElementBlock("div", null, "test")) 5 | } at instantiate (/home/Desktop/PHP/PHPRoot/Shout/node_modules/@babel/parser/lib/index.js:72:32) at constructor (/home/Desktop/PHP/PHPRoot/Shout/node_modules/@babel/parser/lib/index.js:358:12) at Parser.raise (/home/Desktop/PHP/PHPRoot/Shout/node_modules/@babel/parser/lib/index.js:3341:19) at Parser.unexpected (/home/Desktop/PHP/PHPRoot/Shout/node_modules/@babel/parser/lib/index.js:3379:16) at Parser.expect (/home/Desktop/PHP/PHPRoot/Shout/node_modules/@babel/parser/lib/index.js:4008:28) at Parser.parseBindingList (/home/Desktop/PHP/PHPRoot/Shout/node_modules/@babel/parser/lib/index.js:11940:14) at Parser.parseFunctionParams (/home/Desktop/PHP/PHPRoot/Shout/node_modules/@babel/parser/lib/index.js:15451:24) at Parser.parseFunction (/home/Desktop/PHP/PHPRoot/Shout/node_modules/@babel/parser/lib/index.js:15429:10) at Parser.parseFunctionStatement (/home/Desktop/PHP/PHPRoot/Shout/node_modules/@babel/parser/lib/index.js:15030:17) at Parser.parseStatementContent (/home/Desktop/PHP/PHPRoot/Shout/node_modules/@babel/parser/lib/index.js:14682:21) webpack compiled with 1 error
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja" prefix="og: http://ogp.me/ns#"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="shortcut icon" href="favicon.ico"> 7 <link rel="stylesheet" href="css/admin/login.css"> 8</head> 9<body> 10 <div id="app"> 11 <my-banner></my-banner> 12 </div> 13 <script src="/js/admin/admin.js" defer></script> 14</body> 15</html>
admin.js
1import { createApp } from 'vue'; 2import banner from './banner'; 3 4const app = createApp({}); 5app.component('my-banner', banner); 6app.mount('#app');
banner.vue
1<template> 2 <div>test</div> 3</template> 4 5<script lang="ts"> 6import { defineComponent } from 'vue'; 7 8export default defineComponent({ 9 name: 'banner', 10}); 11</script> 12 13<style lang="scss" scoped></style>
試したこと
banner.vueのtemplateタグを消すか、lang="ts"をlang="js"にするとLaravel Mixはエラーを出さなくなりました。
また、lang="js"だと画面に「test」と正常に表示されました。
しかし、TypeScriptだとtemplateタグを含む最小の構成でどうしてもLaravel Mixのエラーが消せないです。
補足情報（FW/ツールのバージョンなど）
Laravel 9
Vue 3.2.31
回答1件
0
自己解決
すみません自己解決しました。
修正箇所は割とありました。
- webpack.min.jsの内容で「js」としてる箇所を「ts」に変更。mix.ts()のところです。
js
1mix 2 .ts('resources/js/admin/admin.ts', 'public/js/admin/') 3 .sass('resources/sass/admin/login.scss', 'public/css/admin/') 4 .vue();
- ドキュメントルートにtsconfig.jsonを作成して以下の内容を記述
json
1{ 2 "compilerOptions": { 3 "target": "es5", 4 "strict": true, 5 "module": "es2015", 6 "moduleResolution": "node", 7 "allowSyntheticDefaultImports": true 8 } 9}
- どこに設置したらいいのかまだわからないけど(TypeScriptのパスが通ってたらどこでも良さげ)、shims-vue.d.tsというファイルを作って以下の内容を記述
ts
1declare module "*.vue" { 2 import Vue from "vue"; 3 const _default: Vue; 4 export default _default; 5}
この状態で
shell
1npm run watch
したら正常にコンパイルされました。お騒がせしてすみません。
投稿2022/07/19 13:48
総合スコア27
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。