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

前提

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')