How to handle page resolution when components live in multiple module folders?

Hey! I’ve run into a bit of a structure problem and wondering if anyone has dealt with something similar.

In our app, we’ve split features into modules, for example:

Modules/Tracker/resources/js/pages/...
Modules/Library/resources/js/pages/...
resources/js/pages/...

Depending on the request, we want to render a page from the appropriate module. On the backend we do know which module the request belongs to (e.g. we set it as a field in inertia response or even a prop like module: 'Tracker'), but in createInertiaApp’s resolve function, we only get the page name, so we can’t do something like:

resolve: (name, response) => {
  return resolvePageComponent(`../../Modules/${response.module}/resources/js/pages/${name}.tsx`, import.meta.glob([...]));
}

Since response or props aren't available in resolve, this isn’t possible out of the box. Right now we’re hacking around it by making the module part of the name like Tracker__myComponent and then parsing it manually (split by __), but that’s pretty brittle.

Just curious: is there any way to pass extra context into resolve, or is that a limitation by design? Would love to know if there’s a cleaner approach or if anyone has found a workaround.

Thanks!

[pascalbaljet]

See also #2330

See also #2330

Thanks, indeed that could resolve our issue.

[pintend]

Another possible solution is passing the module name along with Inertia::render()

for example

return Inertia::render('Tracker:Resource/Page', [
    'someProp' => $value
]);

resolve: (name) => {
    const [module, page] = name.split(":");
    return resolvePageComponent(
        `../../Modules/${module}/resources/js/pages/${page}.tsx`,
        import.meta.glob<DefineComponent>('../../Modules/*/resources/js/pages/**/*.tsx')
    )
},

Note

You may need to override inertia.view-finder in the container or set config inertia.ensure_pages_exist to false so you don't get a ComponentNotFoundException