Q&A
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
現在vueの学習中で、初歩的な知識しかなく理解を深めるため、あるサイトを参考にfilepondというライブラリを利用してlaravelとvueにてファイルアップロードサイトを作るという学習をしているのですが設定にてエラーが生じて調べてもlaravelの知識も乏しく時間が経過するばかりで解決策がないのでご協力いただけないでしょうか。
実行環境はwindows10です、実行したことは、
1.laravelプロジェクトの作成 composer create-project --prefer-dist laravel/laravel filepond
でC:\にプロジェクト名filepondを作成
2.C:\filepondへ移動後、composer require laravel/uiでlaravel/uiをインストール後
php artisan ui vue
npm installを実行
3.プロジェクト直下でnpm install vue-filepond filepond --saveを実行しfilepondをインストールを実行
4.welocome.blade.phpを以下のように編集しました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>Laravel Vue FileUpload</title> <link rel="stylesheet" href="{{ mix('css/app.css') }}"> </head> <body> <div id="app"> <example-component></example-component> </div> <script src="{{ mix('js/app.js') }}"></script> </body> </html> 5.vueファイルは元々ある\resources\js\componentsExampleComponent.vueを以下のように編集しました <template> <div class="content"> <h1>FilePond</h1> <file-pond /> </div> </template> <script> import vueFilePond from 'vue-filepond'; import 'filepond/dist/filepond.min.css'; const FilePond = vueFilePond() export default { components:{ FilePond } } </script>実行してもブラウザ上で<h1>FilePond</h1>までは表示されるのですがfilepondのタグ部分が表示されず
コンソールにてapp.jsでapp.js:52320 [Vue warn]: Error in render: "TypeError: (0 , _vue.h) is not a function"のようなエラーを吐いてしまいます。
他に設定が必要なのでしょうか。
\resources\js\app.jsは以下の通りです
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
以下ライブラリ等のバージョンです
Laravel Framework 6.18.43
"vue": "2.5.17",
"laravel-mix" "5.0.1",
"filepond" "4.25.1
"vue-filepond" "6.0.0"
長々と恐縮ですがどなたかご教授いただければ助かります。
よろしくお願いします。
回答1件
0
ベストアンサー
現在は、バージョンを指定せずにインストールするとVue 3向けのバージョン7がインストールされるようです。
vue-filepondのREADMEに
If you're using Vue 2 please run npm install vue-filepond@^6.0.0
と書かれていますので、以下のようにインストールするとどうでしょうか。
npm install vue-filepond@^6.0.0 --save-dev
投稿2021/02/23 00:40
編集2021/02/23 00:54
総合スコア1899
ご回答ありがとうございます
説明が抜けてました、実はその説明を読んで
npm install vue-filepond@^6.0.0 --save-dev
を実行して"vue-filepond" "6.0.0"になってますので原因はほかにあるかと思います。
説明不足で申し訳ありません。
バージョン6にインストールし直した後、public/js/app.jsを更新するためにnpm run dev（あるいはnpm run prod）を実行する必要がありますが、それでもだめでしょうか。
出来ました！ありがとうございました。
非常に助かりました。
いえいえ、よかったです。質問のコードやエラーはマークダウンのcode機能を利用して見やすくすると回答が付きやすいはずです。見づらいと敬遠されるからです。
ありがとうございました、code機能の件以後気を付けます
あなたの回答
tips
プレビュー
