Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object,In SSR

[abdorrahmani]

Version:

• @inertiajs/react version: 1.0.0

I have a basic problem with SSR in Laravel, Inertia and React. Problem because I have only in SSR mode and I don't have this problem in dev & CSR modes.

I use 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 />
</>
)

now in CourseCard.jsx:

export default function CourseCard({courses}) {

    return (
        <>
            <div>
                {courses.map(({ id, title, slug, poster, description, status, price, type, time, has_favorited }) => (
                {/*others code*/}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </>
    );
}

course data:

(4) [{…}, {…}, {…}, {…}]
0
: 
{id: 5, user_id: 1, type: 'payment', title: 'React.js', category: 'javascript', …}
1
: 
{id: 3, user_id: 1, type: 'payment', title: 'python', category: 'python', …}
2
: 
{id: 2, user_id: 1, type: 'vip', title: 'PHP', category: 'php', …}
3
: 
{id: 1, user_id: 1, type: 'payment', title: 'php Advanced', category: 'python', …}
length
: 
4
[[Prototype]]
: 
Array(0)

I have this error

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

        ],

    ],

];

and 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} />;
        },
    })
);

I try anything but I don't know how to solve that. I think the problem with my data is that when I send empty data SSR that works.

and I have this error just in SSR mode, in CSR or dev I do not have any problem.

[vishal-zonvoir]

any update on this issue, I'm also facing same problem.

[abdorrahmani]

oops, Unfortunately, the problem still persists, send your codes so we can see the differences.

[vishal-zonvoir]

I had fixed this issue, using the ssr noExternal, all the dependencies which are using react-dom,

but I'm still getting the other error related to dom-helper.

[abdorrahmani]

You also send the home page codes?

[wahyunurarizky-sera]

helo I am facing same issue

[wahyunurarizky-sera]

@abdorrahmani do you already solved the issue?