Laravel по-русски

DzonyBB +7

Сообщений: 134

Laravel 12 React TypeScript StarterKits Default Layout

Привет всем собственно вопрос в заголовке . Решил испробовать эту связку , но столкнулся с проблемой несовпадения типов. Использую PHP Storm . Методом проб и ошибок добился что осталась одна ошибка в строке

 page.then((module:ComponentProps<any>)

ругается на <any> . А так код рабочий , и все работает . Но все равно смущает красная строка . Может ли кто нибудь поделиться своими соображениями и подправить мой код . Заранее спасибо . Вот весь мой код .
P.S Пробовал через Copilot , но с каждым разом количество ошибок увеличивалось и достигло почти 70. ))
    И в результате он завис. )) 

import '../css/app.css';

import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createRoot } from 'react-dom/client';
import { initializeTheme } from './hooks/use-appearance';
import { ComponentProps,ReactNode} from 'react';
import Layout from './layouts/app/app';

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')),

    resolve: (name) => {

        const page = resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx'));
        page.then((module:ComponentProps<any>) => {
            module.default.layout = module.default.layout || ((page:ReactNode) => <Layout children={page} />);
        });
        return page;
    },

    setup({ el, App, props }) {
        const root = createRoot(el);

        setTimeout(() => {
            delete el.dataset.page;
        });

        root.render(<App {...props} />);
    },
    progress: {
        color: '#4B5563',
    },
});

// This will set light / dark mode on load...
initializeTheme();

Изменено DzonyBB (08.03.2025 13:53:07)

cherry45wilder

Сообщений: 1

Re: Laravel 12 React TypeScript StarterKits Default Layout

The red line, even though the code works, can indeed be quite confusing. To correct this, you might want to try specifying the actual type of ComponentProps instead of using <any>. The use of <any> can be a bit broad and may cause type checking errors, which is likely what's happening here.

Here's an approach to help resolve the error:
page.then((module: ComponentProps<Record<string, unknown>>) => {
    module.default.layout = module.default.layout || ((page: ReactNode) => <Layout>{page}</Layout>);
});

By using Record<string, unknown> instead of <any>, you can make the type more specific, which helps TypeScript better understand what to expect. This should ideally get rid of the red line error you're seeing in PHP Storm. If you continue to face issues, you might want to delve deeper into the specific types being passed and ensure they align correctly with what ComponentProps expects.

Remember to also check your project configurations in PHP Storm and ensure that TypeScript is set up correctly. This can sometimes be a source of such issues. Good luck!

---

MyCenturas