How does this work with AdonisJS/Inertia's starter kit?

[ziyuang]

According to AdonisJS's guide I started with

pnpm create adonisjs@latest react-project -- --kit=inertia --adapter react
pnpm create adonisjs@latest preact-project -- --kit=inertia

Then I added the preact parts:

cd preact-project
pnpm add preact openapi-types @stouder-io/inertia-preact
pnpm add -D @babel/plugin-transform-react-jsx-development babel-plugin-transform-hook-names @preact/preset-vite

Then I copied react-project/inertia with to preact-project/inertia and made the following changes

diff --color -u react-project/inertia/app/app.tsx preact-project/inertia/app/app.tsx
--- react-project/inertia/app/app.tsx      2024-05-19 22:08:33.248218800 +0300
+++ preact-project/inertia/app/app.tsx     2024-05-19 23:03:31.728876700 +0300
@@ -1,6 +1,6 @@
 import '../css/app.css';
-import { createRoot } from 'react-dom/client';
-import { createInertiaApp } from '@inertiajs/react';
+import { render } from 'preact';
+import { createInertiaApp } from '@stouder-io/inertia-preact';
 import { resolvePageComponent } from '@adonisjs/inertia/helpers'

 const appName = import.meta.env.VITE_APP_NAME || 'AdonisJS'
@@ -19,7 +19,7 @@

   setup({ el, App, props }) {

-    createRoot(el).render(<App {...props} />);
+    render(<App {...props} />, el);

   },
 });

and

diff --color -u react-project/inertia/pages/home.tsx preact-project/inertia/pages/home.tsx
--- react-project/inertia/pages/home.tsx   2024-05-19 23:20:57.481304600 +0300
+++ preact-project/inertia/pages/home.tsx  2024-05-19 23:21:11.873629900 +0300
@@ -1,4 +1,4 @@
-import { Head } from '@inertiajs/react'
+import { Head } from '@stouder-io/inertia-preact'

 export default function Home(props: { version: number }) {
   return (

which should do the trick (I omit the diff from vite.config.ts for now).

But I got a build (node ace build) error from the following lines in the generated preact-project/app/exceptions/handler.ts

  protected statusPages: Record<StatusPageRange, StatusPageRenderer> = {
    '404': (error, { inertia }) => inertia.render('errors/not_found', { error }),
    '500..599': (error, { inertia }) => inertia.render('errors/server_error', { error }),
  }

which is Property 'inertia' does not exist on type 'HttpContext'., among other errors, while the react-project side builds smoothly. Would you happen to know how to fix this?

[ziyuang]

Turns out there are differences also in the middlewares and routes. So a safer way should be to modify the setting in react-project to keep the Inertia configurations.