Compile Issue importing react-core.css in create-react-app project

[jimmyfm]

Importing @patternfly/react-core/dist/umd/react-core.css causes a compile error due to a broken url(...) in the css.

Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.

To replicate you can simply initialize a new create-react-app:

npx create-react-app create-react-app   

Add the css imports to App.js

import "@patternfly/react-core/dist/styles/base.css";
import "@patternfly/react-core/dist/umd/react-core.css";

Running the build will show the error

npm run build

> create-react-app@0.1.0 build
> react-scripts build

Creating an optimized production build...
Failed to compile.

./node_modules/@patternfly/react-core/dist/umd/react-core.css
Error: Can't resolve '../../assets/images/pfbg_576.jpg' in 'C:\git\create-react-app\node_modules\@patternfly\react-core\dist\umd'

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?

I'd call this a bug, the images are effectively at the wrong path.

To get our code to compile we had to change the content of react-core.css replacing all the instances of url("../../assets/images/ with url("../styles/assets/images/ as shown below.

--pf-c-about-modal-box__hero--sm--BackgroundImage: url("../../assets/images/pfbg_992@2x.jpg");

--pf-c-about-modal-box__hero--sm--BackgroundImage: url("../styles/assets/images/pfbg_992@2x.jpg");

What is your product and what release version are you targeting?

We are currently running on 4.97.2, trying to upgrade to 4.121.1 to roll in the Select.onFilter fixes.

[redallen]

What's your use case for import "@patternfly/react-core/dist/umd/react-core.css";? All you should need is import "@patternfly/react-core/dist/styles/base.css";.

[jimmyfm]

Tanks for the super-fast turnaround.

If I only import base.css the components won't render correctly.
The only way to get things to look the way they are supposed to is to also import react-core.css.

[redallen]

@jimmyfm Make sure you import "@patternfly/react-core/dist/styles/base.css"; only once at the top of your app.

[jimmyfm]

Importing only base.css: https://ibb.co/h7RdsHb
Also importing react-core.css: https://ibb.co/xJfVj59

Above you can see what I meant by "it doesn't look right without importing both css".
I am not sure what causes it but something is either missing or misconfigured is our application.

[redallen]

Something is likely misconfigured in your app. You can see importing the base.css works fine in codesandbox.

That UMD file is a reexport of @patternfly/patternfly and should only be used in special cicrumstances .

[jimmyfm]

The situation is more clear now.
Your codesandbox demo clearly showed that PF works, the issue is in create-react-app that does not pick up component css correctly.

I will dig deeper into similar issues like #5650 then report back.

[jimmyfm]

Thanks for the codesanbox example, it provided the perfect environment to try and replicate the issue we are having.

Eventually I succeeded by moving your code into a separate component.

https://codesandbox.io/s/magical-feistel-m3066

[jimmyfm]

This ticket started from a wrong use of PF css then veered into something totally different.
Closing this so I can do some research and open a new and more accurate issue.