styles from @patternfly/react-styles/css/components/Form/form not properly passed at runtime

[anderbubble]

Following the example at
https://v5-archive.patternfly.org/components/forms/form/#basic with the starter kit causes the included <button><HelpIcon /></button> to omit the expected pf-v5-c-form__group-label-help class. This is because at compile time the imported styles is appropriately set to _default from export default _default; but at runtime styles is set to something like

{
  __esModule: true,
  default: {
    formGroupLabelHelp: "pf-v5-c-form__group-label-help",
    // …
  }
}

I have not been able to figure out how to resolve this behavior. For now, I'm using a workaround like this:

import rawStyles from '@patternfly/react-styles/css/components/Form/form';
const styles = rawStyles.default || rawStyles; // workaround

[martinpitt]

Are you literally using <button>? PF5/6 only really support patternfly-react, where you do something like

import { Button } from "@patternfly/react-core/dist/esm/components/Button/index.js";

(similar for other components). This automatically pulls in the styles.

[anderbubble]

Are you literally using ?

I tried it with both <button> and patternfly-react's <Button>.

Do note that he example at https://v5-archive.patternfly.org/components/forms/form/#basic uses <button>.

Also, my work-around demonstrates that the issue isn't with the element, but with the way styles are being imported at runtime.

My research (for what it's worth) suggests that this may be an issue with esbuild‑sass‑plugin; but I haven't found a configuration that resolves it. (e.g., setting namedExports: true)