Bug: Next.js Styles Not Loading

[jared-leddy]

Bug description

Solution: Large Font Awesome Icon Issues on Next.js

From the problem above, we had large icons and many icons were missing. We added the code below, and our icon problem went away.

import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false

Once the icon problem went away, we discovered that our custom SCSS files were not loading. For Next.js, the issue does not happen in dev on localhost. Only when using prod, or the app is deployed on Vercel, does this problem show up.

Min-Reproduction

NPM Versions

{
    "@fortawesome/free-brands-svg-icons": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
}

Reproducible test case

https://github.com/carbondigitalus/min-repro

Screenshots

No response

Font Awesome version

v6.4.0

Serving

Other (as specified in the bug description)

Implementation

Other (as specified in the bug description)

Browser and Operating System

• Google Chrome Version 114.0.5735.133
• iMac computer OS Ventura 13.4

Web bug report checklist

• [X] I have included a test case because my odds go way up that the team can fix this when I do
• [X] I have searched for existing issues and to the best of my knowledge this is not a duplicate

[jared-leddy]

Still trying to resolve this issue.

[alexander-rebello]

I have the same issue. At least the temporary solution works great!