Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error on className with React 19 #560

Closed
Arkellys opened this issue May 9, 2024 · 4 comments
Closed

Error on className with React 19 #560

Arkellys opened this issue May 9, 2024 · 4 comments

Comments

@Arkellys
Copy link

Arkellys commented May 9, 2024

Describe the bug

On React 19 (beta), an error is thrown if className is not passed to <FontAwesomeIcon>.
I believe it's the same bug as the one reported on this issue, except that now it happens even when no className is specified.

Reproducible test case

https://codesandbox.io/p/sandbox/react-19-font-awesome-k6n8ww?file=%2Fsrc%2FApp.js%3A11%2C51

Error on the sandbox:

TypeError: className is undefined

I get a different error when I try it on my app (maybe it depends on the bundler config):

Uncaught TypeError: Cannot read properties of undefined (reading 'split')

Expected behavior

The error is fixed when adding a className, but this prop should not be required.

Setup

  • Browsers: Firefox (125.0.3), Electron (Chromium M124)
  • Font Awesome 6.5.2
  • react-fontawesome 0.2.0
  • React 19.0.0-beta-6946ebe620-20240508
@Arkellys
Copy link
Author

Arkellys commented May 9, 2024

I just noticed there is already a PR to fix this, hopefully it will be merged quickly.

@robmadole
Copy link
Member

I just released 0.2.1 which I think will fix this. Can you all retest?

@sakispirtos
Copy link

sakispirtos commented May 17, 2024

i just pulled down 0.2.1 and my application is now showing this error. i had to roll back to 0.2.0 to resolve. I'm using react 18.3.1, font awesome 6.5.2.

with 0.2.1 it wont fail if i supply a className, but my primary use-case doesn't supply unless its needed. Im fine with supplying if thats a new requirement.

@Arkellys
Copy link
Author

I just released 0.2.1 which I think will fix this. Can you all retest?

I can confirm that version 0.2.1 solves this issue on React 19, thank you!

CrispyBaguette pushed a commit to CrispyBaguette/wasm-palette-converter that referenced this issue Nov 8, 2024
This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| [@fortawesome/react-fontawesome](https://github.com/FortAwesome/react-fontawesome) | dependencies | minor | [`^0.1.19` -> `^0.2.0`](https://renovatebot.com/diffs/npm/@fortawesome%2freact-fontawesome/0.1.19/0.2.2) |

---

### Release Notes

<details>
<summary>FortAwesome/react-fontawesome (@&#8203;fortawesome/react-fontawesome)</summary>

### [`v0.2.2`](https://github.com/FortAwesome/react-fontawesome/blob/HEAD/CHANGELOG.md#022---2024-05-22)

[Compare Source](FortAwesome/react-fontawesome@0.2.1...0.2.2)

##### Fixed

-   Props with nullable/undefined values no longer throw an error [#&#8203;562](FortAwesome/react-fontawesome#562) [#&#8203;560](FortAwesome/react-fontawesome#560)

***

### [`v0.2.1`](https://github.com/FortAwesome/react-fontawesome/blob/HEAD/CHANGELOG.md#021---2024-05-16)

[Compare Source](FortAwesome/react-fontawesome@0.2.0...0.2.1)

##### Changed

-   Remove defaultProps to be compatible with React 19

***

### [`v0.2.0`](https://github.com/FortAwesome/react-fontawesome/blob/HEAD/CHANGELOG.md#020---2022-06-29)

[Compare Source](FortAwesome/react-fontawesome@0.1.19...0.2.0)

##### Added

-   Support for React forwardRef if using React >= 16.3

**Previous [0.1.x change log available here](https://github.com/FortAwesome/react-fontawesome/blob/0.1.x/CHANGELOG.md)**

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzOC4xNDIuNSIsInVwZGF0ZWRJblZlciI6IjM4LjE0Mi41IiwidGFyZ2V0QnJhbmNoIjoibWFzdGVyIiwibGFiZWxzIjpbXX0=-->

Reviewed-on: https://gitea.bruyant.xyz/alexandre/PaletteSwitcher/pulls/44
Co-authored-by: Renovate <renovate@bruyant.xyz>
Co-committed-by: Renovate <renovate@bruyant.xyz>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants