Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug - SSR not working - cannot use patternflly with Nextjs, Remix, or other server-side rendering frameworks #10876

Open
fallmo opened this issue Aug 22, 2024 · 4 comments
Open

Bug - SSR not working - cannot use patternflly with Nextjs, Remix, or other server-side rendering frameworks #10876

fallmo opened this issue Aug 22, 2024 · 4 comments
Labels
bug

Comments

@fallmo
Copy link

fallmo commented Aug 22, 2024 •
edited
Loading

It seems patternfly-react components cannot be used with serverside rendering frameworks. I've tried with both remixjs and nextjs.

The following simple code in both nextjs and remix creates errors

//  layout.js
import { Page } from "@patternfly/react-core";
<html lang="en">
  <body>
    <Page>
      {children}
    </Page>
  </body>
</html>

npm run dev

Error upon accessing website

  • NextJS
Class extends value undefined is not a constructor or null

This might be caused by a React Class Component being rendered in a Server Component, React Class Components only works in Client Components. Read more: https://nextjs.org/docs/messages/class-component-in-server-component
    at createIcon (webpack-internal:///(rsc)/./node_modules/@patternfly/react-icons/dist/esm/createIcon.js:16:74)
    at eval (webpack-internal:///(rsc)/./node_modules/@patternfly/react-icons/dist/esm/icons/check-circle-icon.js:19:80)
    at (rsc)/./node_modules/@patternfly/react-icons/dist/esm/icons/check-circle-icon.js (/home/fedora/accel-tech/srmt-dashboards/.next/server/vendor-chunks/@patternfly.js:1300:1)
    at __webpack_require__ (/home/fedora/accel-tech/srmt-dashboards/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/@patternfly/react-core/dist/esm/helpers/constants.js:21:115)
    at (rsc)/./node_modules/@patternfly/react-core/dist/esm/helpers/constants.js (/home/fedora/accel-tech/srmt-dashboards/.next/server/vendor-chunks/@patternfly.js:1240:1)
    at __webpack_require__ (/home/fedora/accel-tech/srmt-dashboards/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/@patternfly/react-core/dist/esm/helpers/util.js:28:68)
    at (rsc)/./node_modules/@patternfly/react-core/dist/esm/helpers/util.js (/home/fedora/accel-tech/srmt-dashboards/.next/server/vendor-chunks/@patternfly.js:1270:1)
    at __webpack_require__ (/home/fedora/accel-tech/srmt-dashboards/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/@patternfly/react-core/dist/esm/components/Page/Page.js:12:71)
    at (rsc)/./node_modules/@patternfly/react-core/dist/esm/components/Page/Page.js (/home/fedora/accel-tech/srmt-dashboards/.next/server/vendor-chunks/@patternfly.js:1140:1)
    at __webpack_require__ (/home/fedora/accel-tech/srmt-dashboards/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./src/app/layout.tsx:8:80)
    at (rsc)/./src/app/layout.tsx (/home/fedora/accel-tech/srmt-dashboards/.next/server/app/page.js:162:1)
    at Function.__webpack_require__ (/home/fedora/accel-tech/srmt-dashboards/.next/server/webpack-runtime.js:33:42)
    at async e7 (/home/fedora/accel-tech/srmt-dashboards/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:396747)
    at async tS (/home/fedora/accel-tech/srmt-dashboards/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400444)
    at async tw (/home/fedora/accel-tech/srmt-dashboards/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:401005)
    at async tO (/home/fedora/accel-tech/srmt-dashboards/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2130)
    at async /home/fedora/accel-tech/srmt-dashboards/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2722 {
  digest: '2223454686'
}
  • RemixJS
1:45:46 PM [vite] ✨ optimized dependencies changed. reloading
1:45:46 PM [vite] Error when evaluating SSR module /app/root.tsx: failed to import "@patternfly/react-core"
|- /home/fedora/accel-tech/srmt-dashboards-2/node_modules/@patternfly/react-styles/css/components/AboutModalBox/about-modal-box.css:1
:where(:root, .pf-v6-c-about-modal-box) {
^

SyntaxError: Unexpected token ':'
    at wrapSafe (node:internal/modules/cjs/loader:1378:20)
    at Module._compile (node:internal/modules/cjs/loader:1428:41)
    at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Module._load (node:internal/modules/cjs/loader:1104:12)
    at Module.require (node:internal/modules/cjs/loader:1311:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (/home/fedora/accel-tech/srmt-dashboards-2/node_modules/@patternfly/react-styles/css/components/AboutModalBox/about-modal-box.js:3:1)
    at Module._compile (node:internal/modules/cjs/loader:1469:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Module._load (node:internal/modules/cjs/loader:1104:12)
    at Module.require (node:internal/modules/cjs/loader:1311:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (/home/fedora/accel-tech/srmt-dashboards-2/node_modules/@patternfly/react-core/dist/js/components/AboutModal/AboutModalBoxContent.js:7:51)
    at Module._compile (node:internal/modules/cjs/loader:1469:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Module._load (node:internal/modules/cjs/loader:1104:12)
    at Module.require (node:internal/modules/cjs/loader:1311:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (/home/fedora/accel-tech/srmt-dashboards-2/node_modules/@patternfly/react-core/dist/js/components/AboutModal/AboutModal.js:8:32)
    at Module._compile (node:internal/modules/cjs/loader:1469:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Module._load (node:internal/modules/cjs/loader:1104:12)
    at Module.require (node:internal/modules/cjs/loader:1311:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (/home/fedora/accel-tech/srmt-dashboards-2/node_modules/@patternfly/react-core/dist/js/components/AboutModal/index.js:4:22)
@fallmo fallmo added the bug label Aug 22, 2024
@lujun2
Copy link

lujun2 commented Aug 28, 2024

you need to create a client component wrapper with use client declaration

// MyPage.js

'use client';

import { Page } from '@patternfly/react-core';

const MyPage = (props) => {
  return <Page {...props} />
}

@fallmo
Copy link
Author

fallmo commented Aug 28, 2024

you need to create a client component wrapper with use client declaration

// MyPage.js

'use client';

import { Page } from '@patternfly/react-core';

const MyPage = (props) => {
  return <Page {...props} />
}

you need to create a client component wrapper with use client declaration

// MyPage.js

'use client';

import { Page } from '@patternfly/react-core';

const MyPage = (props) => {
  return <Page {...props} />
}

@lujun2, right, I figured. But that would defeat the purpose of using serverside rendering.

@tlabaj
Copy link
Contributor

tlabaj commented Sep 19, 2024

Did the suggestion above work for you?

@fallmo
Copy link
Author

fallmo commented Sep 20, 2024

Did the suggestion above work for you?

Yes, but that tells the framework not to perform serverside rendering.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
PatternFly Issues
Status: Needs info
Milestone
No milestone
Development

No branches or pull requests
3 participants
@lujun2 @tlabaj @fallmo