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 [email protected], 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();
 }