search

vikejs / vike-react

🔨 React integration for Vike
https://vike.dev/vike-react
MIT License
94 stars 15 forks source link

SSR issue with Mui #100

Closed asifsaho closed 5 months ago

asifsaho commented 5 months ago

I am trying to use Mui with Vike SSR mode however if I refresh I get a 500 error but the page works if I change the route from the button click. apparently, the error comes in SSR mode.

6:01:58 PM [vike][request(4)] HTTP response /about 500
6:02:42 PM [vike][request(5)] HTTP request: /about
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check your code at +Page.tsx:10.
    at Page
    at div
    at div
    at Content (/Users/asifsaho/Projects/posinic-website/renderer/PageShell.tsx:112:20)
    at div
    at Layout (/Users/asifsaho/Projects/posinic-website/renderer/PageShell.tsx:66:19)
    at PageContextProvider (/Users/asifsaho/Projects/posinic-website/renderer/usePageContext.tsx:12:32)
    at PageShell (/Users/asifsaho/Projects/posinic-website/renderer/PageShell.tsx:19:22)
6:02:42 PM [vike][request(5)] Following error was thrown by the onRenderHtml() hook defined at /renderer/+onRenderHtml.tsx
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at renderElement (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6047:9)
    at renderNodeDestructiveImpl (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderNode (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6263:12)
    at renderChildrenArray (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6215:7)
    at renderNodeDestructiveImpl (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6145:7)
    at renderNodeDestructive (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderElement (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5975:9)
    at renderNodeDestructiveImpl (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderIndeterminateComponent (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5789:7)
    at renderElement (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5950:7)
    at renderNodeDestructiveImpl (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderNode (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6263:12)
    at renderHostElement (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5646:3)
    at renderElement (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5956:5)
    at renderNodeDestructiveImpl (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderNode (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6263:12)
    at renderHostElement (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5646:3)
    at renderElement (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5956:5)
    at renderNodeDestructiveImpl (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderIndeterminateComponent (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5789:7)
    at renderElement (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5950:7)
    at renderNodeDestructiveImpl (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderNode (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6263:12)
    at renderChildrenArray (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6215:7)
    at renderNodeDestructiveImpl (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6145:7)
    at renderNodeDestructive (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderNode (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6263:12)
    at renderHostElement (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5646:3)
    at renderElement (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5956:5)
    at renderNodeDestructiveImpl (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderIndeterminateComponent (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5789:7)
    at renderElement (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5950:7)
    at renderNodeDestructiveImpl (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderContextProvider (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5924:3)
    at renderElement (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6021:11)
    at renderNodeDestructiveImpl (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderIndeterminateComponent (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5789:7)
    at renderElement (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5950:7)
    at renderNodeDestructiveImpl (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderElement (/Users/asifsaho/Projects/posinic-website/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5975:9)
┌────────────────────────────────────────────────────────────────────────────────────┐
│ To fix this error, see https://vike.dev/broken-npm-package#react-invalid-component │
└────────────────────────────────────────────────────────────────────────────────────┘
6:02:42 PM [vike][request(5)] HTTP response /about 500
brillout commented 5 months ago

Closing as the issue isn't vike(-react) related.

To fix this error, see https://vike.dev/broken-npm-package#react-invalid-component

Have you tried to follow the guide?

asifsaho commented 5 months ago

thanks for your quick answer, that link didn't help however I was able to solve it :)

brillout commented 5 months ago

Why didn't it help? How did you solve it?

asifsaho commented 5 months ago

I meant the instruction in the link wasn't for me. I don't know really how it was solved. I tried so many ways but wasn't able to solve it. Later I reset the environment and installed only two packages @emotion/styled and @mui/material. Now there is no error. SSR is also working as expected. I am still testing. I am trying hard to stay away form the Next JS. It is too slow!