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

Strydom · 2023-04-12T08:53:06Z

Strydom
Apr 12, 2023

server works, but server:prod throws the error in the title.

scripts

    "build": "vite build",
    "server": "ts-node server/index.ts",
    "server:prod": "cross-env NODE_ENV=production ts-node server/index.ts"

The only difference i can see in the code is

  if (isProduction) {
    const sirv = (await import('sirv')).default
    app.use(sirv(`${root}/dist/client`))
  }

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "types": ["vite/client"],
    "jsx": "react",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "resolveJsonModule": true
  },
  "ts-node": {
    "esm": true,
    "experimentalSpecifierResolution": "node"
  }
}

vite.config

const config: UserConfig = {
  plugins: [react(), ssr()]
}

Node version: 19.8.1

    "cross-env": "^7.0.3",
    "express": "^4.18.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sirv": "^2.0.2",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.4",
     "vite": "^4.0.3",
    "vite-plugin-ssr": "^0.4.111",

Same error reported here #704.

Answered by Strydom

Apr 13, 2023

Found the problem, it is MUI library causing issues. Not sure why it only shows up on prod build though?
mui/material-ui#35233

View full answer

brillout · 2023-04-12T08:58:05Z

brillout
Apr 12, 2023
Maintainer

That's a userland problem: make sure to pass components to React and not something else.

4 replies

Strydom Apr 12, 2023
Author

make sure to pass components to React

Thanks for the quick response, although I'm not sure why what i pass to react would change?
I've followed the dual SPA and SSR config here https://vite-plugin-ssr.com/render-modes

_deafult.page.client.ts

export const clientRouting = true
export const hydrationCanBeAborted = true

let root: Root
async function render(pageContext: PageContextClient) {
  const { Page, pageProps } = pageContext

  const page = <PageShell pageContext={pageContext}>
    <Page {...pageProps} />
  </PageShell>

  const container = document.getElementById('page-view')!
  if (
    container?.innerHTML === '' ||
    !pageContext.isHydration
  ) {
    if (!root) {
      root = createRoot(container)
    }
    root.render(page)
  } else {
    root = hydrateRoot(container, page)
  }
}

_deafult.page.server.ts

export async function render(pageContext: PageContextServer) {
  const { Page, pageProps } = pageContext
  // https://vite-plugin-ssr.com/render-modes
  let pageHtml: string = '' // SPA
  if (Page) {
    // SSR / HTML-only
    pageHtml = ReactDOMServer.renderToString(
      <PageShell pageContext={pageContext}>
        <Page {...pageProps} />
      </PageShell>
    )
  }

  console.log("Server hit")

  // See https://vite-plugin-ssr.com/head
  const { documentProps } = pageContext.exports
  const title = documentProps?.title || 'Vite SSR app'
  const desc = documentProps?.description || 'App using Vite + vite-plugin-ssr'

  const documentHtml = escapeInject`<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <link rel="icon" href="${logoUrl}" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="${desc}" />
        <title>${title}</title>
      </head>
      <body>
        <div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>
      </body>
    </html>`

  return {
    documentHtml,
    pageContext: {
      // We can add some `pageContext` here,
      // which is useful if we want to do page redirection https://vite-plugin-ssr.com/page-redirection
    }
  }
}

// See https://vite-plugin-ssr.com/data-fetching
export const passToClient = ['pageProps', 'urlPathname']

Strydom Apr 12, 2023
Author

Seems to be failing here

    // SSR / HTML-only
    pageHtml = ReactDOMServer.renderToString(
      <PageShell pageContext={pageContext}>
        <Page {...pageProps} />
      </PageShell>
    )

Strydom Apr 13, 2023
Author

Found the problem, it is MUI library causing issues. Not sure why it only shows up on prod build though?
mui/material-ui#35233

Answer selected by Strydom

brillout Apr 13, 2023
Maintainer

Thanks for circling back on this.

Not sure why it only shows up on prod build though?

With the whole Node.js CJS-ESM compatibility mess, it isn't unusual to end up with different imports depending on dev/build. That could be a reason.

(Btw. in case you think you can convince your employer: https://github.com/sponsors/brillout. Sponsors are starting to make a huge difference!)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

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

Strydom Apr 12, 2023

Replies: 1 comment · 4 replies

brillout Apr 12, 2023 Maintainer

Strydom Apr 12, 2023 Author

Strydom Apr 12, 2023 Author

Strydom Apr 13, 2023 Author

brillout Apr 13, 2023 Maintainer

Strydom
Apr 12, 2023

Replies: 1 comment 4 replies

brillout
Apr 12, 2023
Maintainer

Strydom Apr 12, 2023
Author

Strydom Apr 12, 2023
Author

Strydom Apr 13, 2023
Author

brillout Apr 13, 2023
Maintainer