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

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

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

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

Laravel

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

1回答

485閲覧

Vueのコンポーネントをlaravelで表示したい

ttpk

総合スコア338

Vue.js

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

Laravel

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2022/09/22 13:38

編集2022/09/22 14:14

前提

laravelのプロジェクトでvueを使用しています。
vueのライブラリを導入しようとしたところエラーが出たので
node_modulesとpackage-lock.jsonを削除してnpm installと npm run watchを再度
実行したところ、表示できていたvueのコンポーネントを表示できなくなってしまいました。

発生している問題・エラーメッセージ

イメージ説明

該当のソースコード

package.json

1{ 2 "private": true, 3 "scripts": { 4 "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js", 5 "development": "mix", 6 "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js --watch", 7 "watch-poll": "mix watch -- --watch-options-poll=1000", 8 "hot": "mix watch --hot", 9 "prod": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js", 10 "production": "mix --production", 11 "build": "webpack" 12 }, 13 "devDependencies": { 14 "@babel/core": "^7.18.10", 15 "@babel/preset-env": "^7.18.10", 16 "@popperjs/core": "^2.10.2", 17 "axios": "^0.21", 18 "bootstrap": "^5.1.3", 19 "cross-env": "^7.0.3", 20 "css-loader": "^6.7.1", 21 "laravel-mix": "^6.0.49", 22 "lodash": "^4.17.19", 23 "mini-css-extract-plugin": "^2.6.1", 24 "postcss": "^8.1.14", 25 "resolve-url-loader": "^5.0.0", 26 "sass": "^1.54.3", 27 "sass-loader": "^11.1.1", 28 "vue": "^3.2.36", 29 "vue-loader": "^16.8.3", 30 "webpack": "^5.74.0", 31 "webpack-cli": "^4.10.0" 32 }, 33 "dependencies": { 34 "node-polyfill-webpack-plugin": "^2.0.1", 35 "os-browserify": "^0.3.0", 36 "path-browserify": "^1.0.1", 37 "process": "^0.11.10", 38 "querystring-es3": "^0.2.1", 39 "vue-toasted": "^1.1.28", 40 "webpack-fix-style-only-entries": "^0.6.1" 41 } 42} 43

webpack.config.js

1const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 2const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries'); 3const NodePolyfillPlugin = require("node-polyfill-webpack-plugin"); 4 5module.exports = { 6 entry: './src/index.js', 7 output: { 8 path: `${__dirname}/dist`, 9 filename: 'main.js' 10 }, 11 mode: 'development', 12 entry: './src/style.scss', 13 module: { 14 rules: [ 15 { 16 test: /\.s[ac]ss$/i, 17 use: [ 18 MiniCssExtractPlugin.loader, 19 'css-loader', 20 'sass-loader', 21 ], 22 } 23 ], 24 }, 25 plugins: [ 26 new MiniCssExtractPlugin({ 27 filename: 'style.css' 28 }), 29 new FixStyleOnlyEntriesPlugin(), 30 new NodePolyfillPlugin(), 31 ], 32} 33

webpack.mix.js

1let mix = require('laravel-mix'); 2 3mix.webpackConfig({ 4 resolve : { 5 fallback : { 6 "path" : false, 7 "os" : false, 8 "constants": false, 9 "stream": false, 10 "https": false, 11 "http": false, 12 "fs": false, 13 } 14 } 15}) 16 17mix.js('resources/js/app.js', 'public/js').vue() 18 .sass('resources/css/app.scss', 'public/css'); 19

resources/app.js

1window.Vue = require('vue'); 2import { createApp } from 'vue' 3import PanelComponent from './components/PanelComponent.vue' 4 5createApp({ 6 components:{ 7 PanelComponent 8 } 9}).mount('#app')

確認が必要な箇所はどこになるでしょうか?

試したこと

npm cache clean --forceとrm -rf ~/.npmを実行後
node_modulesとpackage-lock.jsonを削除して
npm installと npm run watchを実行しましたがエラーは変わりませんでした。

補足情報(FW/ツールのバージョンなど)

Laravel v8.83.23
PHP v7.4.18

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

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

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

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

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

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

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

回答1

0

自己解決

エラーに出てくるfsモジュールは全てlaravel-mixとしか依存関係がなかったので
laravel-mixの使用をやめて環境を作り直すことにしました

投稿2022/09/23 09:09

ttpk

総合スコア338

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

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.69%

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

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

質問する

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

Vue.js

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

Laravel

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。