Production React SSR build manifest is wrong if a page depends on `@blueprintjs/core`

[targos]

Package version

3.1.0

Describe the bug

Here's a repro:

npm init adonisjs@latest -- --K=inertia --adapter=react --ssr --auth-guard=basic_auth --db=sqlite repro
cd repro
# force just to bypass react peer dependency error. this can be reproduced with react 18 too.
npm i @blueprintjs/core --force
echo "import { Button } from '@blueprintjs/core'\n\nexport default function Test() { return <Button>Test</Button> }" > inertia/pages/home.tsx
npm run build
cd build
cp ../.env .env
# Edit the .env to have NODE_ENV=production
node bin/server.js
# Then access http://localhost:3333
# Error: Cannot find \"inertia/pages/home.tsx\" chunk in the manifest file

The problem is that the manifest (build/public/assets/.vite/manifest.json) doesn't contain an entry for the home.tsx page. It should have a key named "inertia/pages/errors/home.tsx".

If you add another unrelated page that also uses @blueprintjs/core, it suddenly works again (both pages end up in the manifest).

I'm opening this because I have no idea where to start debugging the problem. It already took me a very long time to understand the cause.

Reproduction repo

No response

[Julien-R44]

Well this is super weird. Never saw that 😅 We don't do anything fancy on the manifest generation, everything is handled by Vite. Also, this is probably more an issue with @adonisjs/vite than @adonisjs/inertia

Is it a blocking issue for you? I don't think so since you said adding another page makes it work. I can probably suggest a workaround if its blocking, but need to check first if its working

In any case, I will take a look soon

[targos]

It's not blocking since we use the workaround of creating a small dummy page that also uses that library. Thanks for looking into it!

[pk4all]

I am facing same issues like this type , My vite config file is ... `export default defineConfig({ plugins: [ adonisjs({ /** * Entrypoints of your application. Each entrypoint will * result in a separate bundle. */ entrypoints: ['resources/css/app.css', 'resources/js/app.js'],

  /**
   * Paths to watch and reload the browser on file change
   */
  reload: ['resources/views/**/*.edge'],
}),
inertia({ 
  ssr: { 
    enabled: true, 
    entrypoint: 'inertia/app/ssr.tsx' 
  } 
}),
react(),
adonisjs({
  entrypoints:['inertia/app/app.tsx','inertia/app/admin.tsx'],
  reload: ['resources/views/**/*.edge']
})

], build: { rollupOptions: { output: { entryFileNames: '[name].js', chunkFileNames: '[name]-[hash].js', assetFileNames: '[name]-[hash].[ext]', }, }, }, }) `

and in my maifest file after build "inertia/app/admin.tsx": { "file": "admin.js", "name": "admin", "src": "inertia/app/admin.tsx", "isEntry": true, "dynamicImports": [ "_add-Cc3434Jo.js", "_edit-BOQlOIlu.js", "_list-UTCLFajB.js", "_add-CKrH5640.js", like this.

if I replace .tsx to .js manually my build is running successfully .

Any solution for this issue?

[JanStevens]

Hi,

I have EXACTLY the same problem but with a different dependency: tiptap editor v3.

Adding another dummy page "fixes" it and also adding manual chunks to move it explicitly in its own chunk worked for me

build: {
      rollupOptions: {
        output: {
          manualChunks: (id, { getModuleInfo }) => {
            if (id.includes('@tiptap')) {
              return '@tiptap'
            }

            return null
          },
        },
      },
    },

Replace @tiptap with your dependency and suddenly the page entry is correct

[github-actions[bot]]

This issue has been marked as stale because it has been inactive for more than 21 days. Please reopen if you still need help on this issue

[github-actions[bot]]

This issue has been automatically closed because it has been inactive for more than 4 weeks. Please reopen if you still need help on this issue

[thetutlage]

Digged a bit deeper to find out the issue.

The core of the issue is, the Inertia pages are missing in the manifest file. This is because Vite does not guarantee putting all the files in the manifest if they are not part of the rollupOptions.input or entrypoints in our case.

Now, we have two options.

1. Remove the usage of pages within the Edge templates via @vite tag. Doing so will result in first loading the app chunk and then triggering another request to load the page chunk.

- @vite(['inertia/app.tsx', `inertia/pages/${page.component}.tsx`])
+ @vite(['inertia/app.tsx'])

2. We register Inertia pages as a glob to our vite plugin and under the hood we scan all the files and register them as rollupOptions.input. This will make sure every page is part of the manifest file. I have not tested this yet.

For now, I will go with Option 1 in our newer starter kits and then look into implementing Option 2

[github-actions[bot]]

This issue has been marked as stale because it has been inactive for more than 21 days. Please reopen if you still need help on this issue