Blank page is showing laravel and vue

Question

Info

Using laravel and vue project

1. After installing composer install and npm install blank page is showing
2. Laravel 8, Vue vue@3.2.31 , PHP 8 and ubuntu 20
3. Project location /www/html/ project
4. Start the project using php artisan serve
5. Network tab http://127.0.0.1:8000/ showing status 200 but in preview tab

Error

No warning and console error. Network tab http://127.0.0.1:8000/ showing status 200 but in the preview tab below error gives

There was a problem loading your site type details

Code

Webpack.mix.js

 const plugins = [
require('postcss-import'),
require('tailwindcss'),
require('postcss-nested'),
require('autoprefixer')
];

 mix
.webpackConfig({
    resolve: {
        alias: {
            '@': __dirname + '/resources/js'
        }
    }
})
.js('resources/js/project/app.js', 'public/js').vue().version()
.js('resources/js/_default/admin.js', 'public/js').vue().version()
.postCss('resources/css/app.css', 'public/css', plugins)
.postCss('resources/css/admin.css', 'public/css', plugins)
.sass('resources/css/admin/bootstrap.custom.scss', 'public/css')
//.browserSync('127.0.0.1:8000')

//mix.dumpWebpackConfig();

if (mix.inProduction()) {
 mix.version();
}

package.json

{
"private": true,
"scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
},
"devDependencies": {
    "@vue/compiler-sfc": "^3.2.20",
    "autoprefixer": "^10.4.0",
    "axios": "^0.21",
    "browser-sync": "^2.27.7",
    "browser-sync-webpack-plugin": "^2.3.0",
    "laravel-mix": "^6.0.0-beta.17",
    "lodash": "^4.17.19",
    "popper.js": "^1.16.1",
    "postcss": "^8.3.11",
    "postcss-import": "^12.0",
    "postcss-nested": "^4.2",
    "resolve-url-loader": "^3.1.2",
    "sass": "^1.32.11",
    "sass-loader": "^11.1.1",
    "tailwindcss": "^2.2.19",
    "vue": "^3.2.20",
    "vue-loader": "^16.8.2",
    "vue-template-compiler": "^2.6.12"
},
"dependencies": {
    "@headlessui/vue": "^1.4.1",
    "@heroicons/vue": "^1.0.5",
    "@tailwindcss/forms": "^0.3.4",
    "bootstrap": "^4.6.1",
    "formiojs": "^4.13.11",
    "install": "^0.13.0",
    "npm": "^8.1.1",
    "or": "^0.2.0",
    "vue-i18n": "^8.26.5",
    "vue-router": "^4.0.12",
    "webpack-shell-plugin-next": "^2.2.2"
 }
 }

I don't know what's wrong with this project, I tried deleting the node_modules and npm install but still got the same error, npm run hot also did not gives any error

Answer 1

 const path = require('path');


 mix.js(['resources/js/app.js','resources/js/_default/admin.js'], "public/js")
        .vue()
        .postCss(['resources/css/app.css', 'resources/css/admin.css'], "public/css", plugins)
        .sass('resources/css/admin/bootstrap.custom.scss', 'public/css')
        .webpackConfig({
           resolve: {
             alias: {
               '@': path.resolve('resources/js'),
             },
           },
         };);
    
 if (mix.inProduction()) {
        mix.version();
 }