Bug - [SSR-Remix] - [Not supported??]

[hiql]

Hello, guys:

I hope I can adopt this wonderful works in my projects, so I do the following steps，but did not have success:(

---

Create the remix app:

npx create-remix@latest

Add the package:

npm install @patternfly/react-core --save

Add some test code:

import { Button } from "@patternfly/react-core";
import type { V2_MetaFunction } from "@remix-run/node";

export const meta: V2_MetaFunction = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};

export default function Index() {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
      <h1>Welcome to Remix</h1>
      <Button>Hello</Button>
      <ul>
        <li>
          <a
            target="_blank"
            href="https://remix.run/tutorials/blog"
            rel="noreferrer"
          >
            15m Quickstart Blog Tutorial
          </a>
        </li>
        <li>
          <a
            target="_blank"
            href="https://remix.run/tutorials/jokes"
            rel="noreferrer"
          >
            Deep Dive Jokes App Tutorial
          </a>
        </li>
        <li>
          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
            Remix Docs
          </a>
        </li>
      </ul>
    </div>
  );
}

Finally, got some errors:

% npm run dev

> dev
> remix dev


 💿  remix dev

 info  building...
 info  built (1.2s)
/Users/hiql/workspace/demo/pf-demo/node_modules/@patternfly/react-styles/css/components/AboutModalBox/about-modal-box.css:1
.pf-v5-c-about-modal-box {
^

SyntaxError: Unexpected token '.'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Function.Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:121:18)
    at Object.<anonymous> (/Users/hiql/workspace/demo/pf-demo/node_modules/@patternfly/react-styles/css/components/AboutModalBox/about-modal-box.js:3:1)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)

Did I miss something?
Does it work in SSR mode?

[nicolethoen]

@hiql if you are hoping to use the patternfly React components in a React app, you'll want to run npm install @patternfly/react-core --save and import Button from @patternfly/reac-core.

@patternfly/patternfly is our HTML/CSS code for PatternFly

[hiql]

@nicolethoen
Sorry! my typos.
I actually use the @patternfly/react-core.

[hiql]

Doesn't anyone care about server-side rendering???

😂

[nicolethoen]

I don't have any experience with create-remix. But it looks like out of the box, it's not configured to recognize CSS. I wonder if you need to look at using something like https://remix.run/docs/en/main/styling/bundling to configure proper CSS bundling or something like that?

[stale]

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

[fallmo]

@hiql hey, did you end up finding a solution?

[hiql]

@hiql hey, did you end up finding a solution?

No, I've given up, and I'm using antd now 😂