Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

[Maikpwwq]

I have a vite js project with vite-plugin-ssr, It build and works correctly in my development environment but when I make use of command npm run build (vite build) it fails with this:

pageIndexContextServer [Function: Page] undefined
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at Ib (/media/oem/MyFiles/8_DEVELOPMENT/Comunidad-Dezzpo-PWA/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:72:155)
    at W (/media/oem/MyFiles/8_DEVELOPMENT/Comunidad-Dezzpo-PWA/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:73:89)
    at Jb (/media/oem/MyFiles/8_DEVELOPMENT/Comunidad-Dezzpo-PWA/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:76:98)
    at Ib (/media/oem/MyFiles/8_DEVELOPMENT/Comunidad-Dezzpo-PWA/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:68:145)
    at W (/media/oem/MyFiles/8_DEVELOPMENT/Comunidad-Dezzpo-PWA/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:73:89)
    at Jb (/media/oem/MyFiles/8_DEVELOPMENT/Comunidad-Dezzpo-PWA/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:76:98)
    at Kb (/media/oem/MyFiles/8_DEVELOPMENT/Comunidad-Dezzpo-PWA/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:75:140)
    at W (/media/oem/MyFiles/8_DEVELOPMENT/Comunidad-Dezzpo-PWA/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:73:345)
    at Ib (/media/oem/MyFiles/8_DEVELOPMENT/Comunidad-Dezzpo-PWA/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:68:479)
    at W (/media/oem/MyFiles/8_DEVELOPMENT/Comunidad-Dezzpo-PWA/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:73:89)
 ELIFECYCLE  Command failed with exit code 1.

The error message I get don't give a bright help. This is my repository project for comunidad dezzpo. I am trying to define routes with a different Layout for my index and app folders defined in pages folder for that reason I have two renderer folders.

I have already look for and try common solutions.

[brillout]

The best would be to create a minimal reproduction. I'll dig into it then.

[Maikpwwq]

Actualization

As I am using react-swipeable-views, for ts projects there are necessary types definitions to use: pnpm install --save @types/react-swipeable-views-utils @types/react-swipeable-views, same for pnpm i -D @types/google.maps. Also I have to add this packages to noExternal config in my vite.config.ts file because each of them was throw me with error.

// https://vitejs.dev/config/ssr-options.html#ssr-noexternal
const isProd = process.env.NODE_ENV === 'production'
const noExternal: string[] = []
if (isProd) {
    noExternal.push(
        ...[
            // MUI needs to be pre-processed by Vite in production: https://github.com/brillout/vite-plugin-ssr/discussions/901
            '@mui/base',
            '@mui/icons-material',
            '@mui/material',
            '@mui/utils',
            '@mui/x-data-grid',
            'react-bootstrap',
            'date-fns',
            '@sendbird/uikit-react',
            'react-swipeable-views',
            'react-swipeable-views-utils',
            'react-google-autocomplete',
            'react-icomoon',
            'firebase',
            'rxjs',
            'prop-types',
            'uuid',
            '@googlemaps/js-api-loader',
        ]
    )
}

export default defineConfig(async ({ command, mode }) => {
    console.log('defineConfig', command, mode)
    return {
        plugins: [
            react(),
            ssr({
                // Use the default pre-render config:
                prerender: true,
            }),
        ],
        ssr: { noExternal },
   }
})

[brillout]

Thanks for the update. (FYI I'm reaching out to the Vite team to improve the DX around all that. Ideally everything should be taking care of without the user having to fiddle around with ssr.noExternal.)