質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

解決済

Laravel + Vue3 + TypeScriptで最小のコンポーネントを作りたい

sengoku38
sengoku38

総合スコア24

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

1回答

0リアクション

0クリップ

304閲覧

投稿2022/07/19 11:54

前提

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

<!DOCTYPE html> <html lang="ja" prefix="og: http://ogp.me/ns#"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="css/admin/login.css"> </head> <body> <div id="app"> <my-banner></my-banner> </div> <script src="/js/admin/admin.js" defer></script> </body> </html>

admin.js

import { createApp } from 'vue'; import banner from './banner'; const app = createApp({}); app.component('my-banner', banner); app.mount('#app');

banner.vue

<template> <div>test</div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'banner', }); </script> <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

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。