اذهب إلى المحتوى
  • 0

ما سبب مشكلة React.jsx: type is invalid -- expected a string (for built-in components) or a class/function

Abdelrahman Mostafa10

السؤال

لدي مشكلة كبيرة في SSR في Laravel وInertia وReact، والمشكلة تكمن في أنني أواجه تلك المشكلة فقط في وضع SSR وليس لدي تلك المشكلة في وضع التطوير ووضع CSR.

واستخدم Laravel-inertia-react-vite، وذلك الكود في ملف Home.jsx:

import MasterLayout from "@/Layouts/MasterLayout";
import CourseCard from "@/Components/CourseCard";

export default function Home({courses}){
    return (
        <>
            <MasterLayout>
                <CourseCard courses={courses.slice(0,2)} />
            </MasterLayout>
        </>
    );
}

بيانات الدورة:

[
  {id: 5, user_id: 1, type: 'payment', title: 'React.js', category: 'javascript', ...},
  {id: 3, user_id: 1, type: 'payment', title: 'python', category: 'python', ...},
  {id: 2, user_id: 1, type: 'vip', title: 'PHP', category: 'php', ...},
  {id: 1, user_id: 1, type: 'payment', title: 'php Advanced', category: 'python', ...}
]

أواجه هذا الخطأ:

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.                                                           
    at CourseCard (file:///D:/Projects/**/**/bootstrap/ssr/assets/CourseCard-0f7e9619.js:8:23)                                                                                                     
    at div                                                                                                                                                                                                   
    at div                                                                                                                                                                                                   
    at div                                                                                                                                                                                                   
    at div                                                                                                                                                                                                   
    at div                                                                                                                                                                                                   
    at section                                                                                                                                                                                               
    at div                                                                                                                                                                                                   
    at main                                                                                                                                                                                                  
    at MasterLayout (file:///D:/Projects/**/**/bootstrap/ssr/assets/MasterLayout-94d1044e.js:191:25)                                                                                               
    at Home (file:///D:/Projects/**/**/bootstrap/ssr/assets/Home-0d9441f1.js:203:17)                                                                                                               
    at M (file:///D:/Projects/**/**/node_modules/@inertiajs/react/dist/index.esm.js:1:489)                                                                                                         
    at div                                                                                                                                                                                                   
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.                                                                  
    at renderElement (D:\Projects\**\***\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6047:9)      

inertia.php:

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Server Side Rendering
    |--------------------------------------------------------------------------
    |
    | These options configures if and how Inertia uses Server Side Rendering
    | to pre-render the initial visits made to your application's pages.
    |
    | You can specify a custom SSR bundle path, or omit it to let Inertia
    | try and automatically detect it for you.
    |
    | Do note that enabling these options will NOT automatically make SSR work,
    | as a separate rendering service needs to be available. To learn more,
    | please visit https://inertiajs.com/server-side-rendering
    |
    */

    'ssr' => [

        'enabled' => true,

        'url' => 'http://127.0.0.1:13714',

        // 'bundle' => base_path('bootstrap/ssr/ssr.mjs'),

    ],

    /*
    |--------------------------------------------------------------------------
    | Testing
    |--------------------------------------------------------------------------
    |
    | The values described here are used to locate Inertia components on the
    | filesystem. For instance, when using `assertInertia`, the assertion
    | attempts to locate the component as a file relative to any of the
    | paths AND with any of the extensions specified here.
    |
    */

    'testing' => [

        'ensure_pages_exist' => true,

        'page_paths' => [

            resource_path('js/Pages'),

        ],

        'page_extensions' => [

            'js',
            'jsx',
            'svelte',
            'ts',
            'tsx',
            'vue',

        ],

    ],

];

وssr.jsx:

import ReactDOMServer from 'react-dom/server';
import { createInertiaApp } from '@inertiajs/react';
import createServer from '@inertiajs/react/server';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import route from '../../vendor/tightenco/ziggy/dist/index.m';

createServer((page) =>
    createInertiaApp({
        page,
        render: ReactDOMServer.renderToString,
        resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
        setup: ({ App, props }) => {
            global.route = (name, params, absolute) =>
                route(name, params, absolute, {
                    ...page.props.ziggy,
                    location: new URL(page.props.ziggy.location),
                });

            return <App {...props} />;
        },
    })
);

لقد جربت كل شيء ولكن لا أعرف كيفية حل المشكلة، أعتقد أن السبب في بياناتي فعند إرسال بيانات فارغة للوضع SSR يحدث ذلك.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

لا توجد أي إجابات على هذا السؤال بعد

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...