Dynamic import/require in resolveComponent/resolve function using modules?

Versions:

• @inertiajs/inertia version: 0.10.1
• @inertiajs/inertia-react version: 0.7.1

Describe the problem:

Hello everyone. I use InertiaJS with Laravel. Also I use nWidart/laravel-modules. I want to render JS files from my modules dynamically. They are in Modules/Module-name/Resources/assets/js. This is my controller

    public function showLoginForm(): Response
    {
        return Inertia::render('AdminPanel::Login');
    }

My webpack.mix

mix.js('resources/js/app.js', 'public/js')
    .react()
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig({
        output: {chunkFilename: 'js/[name].js?id=[chunkhash]'},
        resolve: {
            alias: {
                '@': path.resolve(__dirname, 'resources/js'),
                '~': path.resolve(__dirname, 'Modules'),
            }
        },
    })

mix.version()

This is my app.js

const app = document.getElementById('app');

render(
    <InertiaApp
        initialPage={JSON.parse(app.dataset.page)}
        resolveComponent={async name => {
            let parts = name.split('::')
            if(parts.length > 1) {
                return import(`~/${parts[0]}/Resources/assets/js/Pages/${parts[1]}`).then(module => module.default)
            }else {
                return import('./src/Pages/' + name).then(module => module.default)
            }
        }}
    />,
    app
);

In this case I go many webpack errors like:

ERROR in ./node_modules/enhanced-resolve/lib/MainFieldPlugin.js 8:13-28
Module not found: Error: Can't resolve 'path' in '/Volumes/Storage/Shared/pump-manager/node_modules/enhanced-resolve/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

I also tried with CreateInertiaApp and required functions - the same result

But if I use static path to module files like: ~/AdminPanel/Resources/assets/js/${parts[0]} then there are no errors and everything works fine. But that means I should describe all my modules and static paths to their js files in app.js. I would want to escape this.

I also checked this issue and this one but unsuccessfully… Someone has the same errors, someone has it works fine

Thanks

[maxonfjvipon]

Just in case, if somebody does not want to load a single chunk for every single page file. You may do: Module structure: app.js in your module Every page file should be exported as default function: main app.js (in resources/js/)

So, now every js chunk will contain all js files for your module

[maxonfjvipon]

@rafalkrawiec @interviadmin I bow before you. It finally works. Thank you so much. Now it looks like this:

I did not realize before that first argument in require.context() function and path in context are not the same! @rafalkrawiec - you were right about the map. So we’re done here. Thanks again. ❤️