Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
👋🌍!
I recently moved to use InertiaJs with React Typescript, I tried to use the default layout for components as defined in Inertia docs: https://inertiajs.com/pages#default-layouts
But, in Phpstorm there is plenty of errors.
TS7006: Parameter page implicitly has an any type.
resolve: name => {
const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
let page = pages[`./Pages/${name}.jsx`]
page.default.layout = page.default.layout || (page => <Layout children={page} />)
return page
},
You get this error because you're using inertia and react with typescript. The code in your app js now is for inertia and react without typescript.
That's why its giving you this type related error. Also when using typescript the files of your pages should end with .tsx not .jsx
@gych Yes I realized the problem of tsx extension, now I'm trying to create an interface to match Inertiajs page types.
Till now I didn't react any progress.
@hamzaelmaghari Are you trying to implement this into an existing project or is this a fresh installation? Because if the installation went right you should already have the right app file with tsx files and not jsx.
@gych It's a fresh installation, as I should inform you that the installation is manual not such breeze or jetstream.
BTW everything is working great in the browser except the default page layout because as I think that InertiajsJs is not fully optimized for TypeScript.
@hamzaelmaghari Ok, try to use this code to render your app
import './bootstrap';
import '../css/app.css';
import { createRoot } from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx')),
setup({ el, App, props }) {
const root = createRoot(el);
root.render(<App {...props} />);
},
});
If you want to load the app in a default layout you can import the layout and put the <App {...props} /> inside of the layout component.
For example
root.render(
<YourImportedLayout>
<App {...props} />
</YourImportedLayout>
);
@gych It's already render everything great, after some adjustements in app.tsx file default layout worked. Now everything works fine, except psychological issues with red highlighting in the IDE.
It underlines the page words:
page.default.layout = page.default.layout || (page => <Layout children={page}/>)
TS18046: page is of type unknown
Except that everything works just fine <3
@hamzaelmaghari Yes you still get this error because there is no type assigned to the page variable. Therefor it should use type any, without it throws this error. It won't break your code because its a type error but its bad practise to leave these errors as it is.
Give the code that I added in my previous reply a try
@hamzaelmaghari The error message is telling you the problem:
Parameter page implicitly has an any type.
You have let page, but TypeScript doesn’t know what type this is, because it can’t infer it and you’ve also not told it what type it is.
The “quick” fix is to just type it as any:
let page: any = pages[`./Pages/${name}.jsx`];
TypeScript (and PHPStorm) should stop complaining then.
@martinbean Thank you, you saved me today!
You should pass the type argument and to resolve the TypeScript error. This worked for me:
resolve: async (name) => {
const pages = import.meta.glob<DefineComponent>("./pages/**/*.vue");
return await resolvePageComponent<DefineComponent>(`./pages/${name}.vue`, pages);
},
Please or to participate in this conversation.