前提
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
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。