patternfly-react icon indicating copy to clipboard operation
patternfly-react copied to clipboard

Published 20 hours ago • verified publisher icon patternfly

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

Open fallmo opened this issue 1 year ago • 4 comments
trafficstars

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 avatar Aug 22 '24 20:08 fallmo

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 avatar Aug 28 '24 07:08 lujun2

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.

fallmo avatar Aug 28 '24 18:08 fallmo

Did the suggestion above work for you?

tlabaj avatar Sep 19 '24 15:09 tlabaj

Did the suggestion above work for you?

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

fallmo avatar Sep 20 '24 11:09 fallmo

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

github-actions[bot] avatar Dec 25 '24 11:12 github-actions[bot]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

github-actions[bot] avatar Apr 08 '25 11:04 github-actions[bot]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

github-actions[bot] avatar Sep 28 '25 11:09 github-actions[bot]