Loading chunk resources_js_Pages_Page_vue failed

Hi people

Today I installed Laraish which is a good tool to help us using Laravel and all of its power to build a WordPress theme. Mixing Laraish and Corcel looks good help to create a WordPress website with Laravel!

However, when I tried to install Vue JS and use Code Splitting I get a confusing error.

Now the Laravel project located in wp-content/themes/laraish/ directory. I can load all other js files like app.js, vendor.js, and manifest.js but when I load the page, there is another file for "Welcome.vue" page and it is rendered in public/js/resources_js_Pages_Welcome_vue.js.

For other js files (like app.js) i use: wp-content/themes/laraish/public/js/app.js, wp-content/themes/laraish/public/js/vendor.js, wp-content/themes/laraish/public/js/manifest.js.

But resources_js_Pages_Welcome_vue.js file automatically loads under: http://localhost/js/resources_js_Pages_Welcome_vue.js. The problem with this address is that because Laravel is now part of WordPress, resources_js_Pages_Welcome_vue.js cannot be found. I want to tell WordPress to find it in wp-content/themes/laraish/public/js directory!

How can I tell WordPress or whatever else that is responsible for loading resources_js_Pages_Welcome_vue.js file to load it from wp-content/themes/laraish/public/js directory and not somewhere else?

I know this question probably is not fully related to Mix but because I'm doing code splitting using webpack.mix and Vue JS I thought maybe I should ask my question here. Please help me to solve problem. Thanks in advance.

I put sample codes for App.php file and other codes I used here.

views/app.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
        <link rel="canonical" href="{{ url()->current() }}">
        <title inertia>{{ config('app.name', 'Laravel') }}</title>
    </head>
    <body>
        @inertia
        @routes
            <!-- Fonts -->
            <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
            <link rel="stylesheet" href="{{asset('wp-content/themes/laraish/public/css/app.css')}}">
            <script src="{{ asset('wp-content/themes/laraish/public/js/manifest.js') }}" defer></script>
            <script src="{{ asset('wp-content/themes/laraish/public/js/vendor.js') }}" defer></script>
            <script src="{{ asset('wp-content/themes/laraish/public/js/app.js') }}" defer></script>
        @inertiaHead
    </body>
</html>

webpack.mix.js

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
    .extract()
    .vue()
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        postCss: [ tailwindcss('./tailwind.config.js') ],
    });

.babelrc

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

resources/js/app.js

import './bootstrap';
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';

import Layout from './Layouts/GeneralLayout.vue';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: async (name) => {
        let page = (await import(`./Pages/${name}.vue`)).default;

        page.Layout ??= Layout

        return page
    },
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
});

InertiaProgress.init({ color: '#4B5563' });

Please or to participate in this conversation.