InertiaJS-AdonisJS: App loading as a single component

[techport-om]

Issue: Currently, I am running AdonisJS with InertiaJS-AdonisJS and have encountered an issue where the entire application is being loaded as a single large component. This has resulted in performance and maintainability concerns, as the app becomes harder to manage and load times are negatively impacted.

Steps to reproduce:

• Install and configure Adonis with InertiaJS-AdonisJS.
• Set up an Inertia application using the provided setup code.

  ReactDOM.render(
    <InertiaApp
      initialPage={JSON.parse(el?.dataset.page || '')}
      initialComponent={null}
      resolveComponent={(name) => {
        const page = import(`./pages/${name}`).then((module) => module.default)
        return page
      }}
    />,
  el
  )

• Run the application.

Expected behavior: Each page or route in the application should load its respective components separately, promoting modularity and improving performance.

Actual behavior: The entire application is being loaded as one big component, which affects the performance and maintainability of the application. Below, is an actual production screenshot of the loaded app.

[eidellev]

Hey @techport-om ! Thanks for reporting this issue. Generally speaking this goes a bit beyond the scope of this package and has more to do with your webpack-encore/vite config. For encore you should follow this guide: https://symfonycasts.com/screencast/webpack-encore/code-splitting

Let me know if it helped :-)

[techport-om]

Hey @eidellev

I appreciate the swift response. In addition, i am not using vite at all, i am using the built in adonisjs encore.

[eidellev]

@techport-om have you managed to solve this issue? I am closing this for now, but feel free to re-open if there are further issues.