Better support for React 19 #3268
Conversation
🦋 Changeset detectedLatest commit: ef87bfd The changes in this PR will be included in the next version bump. This PR includes changesets to release 7 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Storybook demo06590c887 | 91 komponenter | 144 stories |
HalvorHaugan
changed the title
| "@navikt/ds-react": patch | ||
| --- | ||
|
|
||
| Avoid warning about element.ref in React 19 |
There was a problem hiding this comment.
Since Slot is an internal component, I don't think it's relevant to mention it. We could mention every component that uses it, but then I think the text would become too long 😅
| "@navikt/ds-react": patch | ||
| --- | ||
|
|
||
| Date/MonthPicker: Upgrade react-day-picker to fix issue with React 19 |
There was a problem hiding this comment.
Ref. my previous comment, perhaps we should not mention react-day-picker either? Maybe just write "Fix issue with React 19"?
There was a problem hiding this comment.
I guess it's a transitive dependency, and consumers will be able to see it in their node_modules, but they should probably also not care what we use to build stuff under the hood? 🤔. it's just a patch, and I guess most will probably filter out release notes on the patch level anyways?. I say just keep it as this, it's at least transparent.
There was a problem hiding this comment.
I tried just doing children.props.ref || (children as any).ref first, but it didn't work properly.
| @@ -19,7 +19,8 @@ | |||
| ], | |||
| "paths": { | |||
| "@/*": ["./src/*"] | |||
| } | |||
| }, | |||
| "target": "ES2017" | |||
There was a problem hiding this comment.
Nextjs added this automatically 🤷♂️
| "@next/bundle-analyzer": "^14.1.0", | ||
| "next": "14.2.12", | ||
| "@next/bundle-analyzer": "^15.0.0", | ||
| "next": "15.0.0", | ||
| "react": "^18", |
There was a problem hiding this comment.
should we upgrade to react 19 for the example nextjs project as well?
There was a problem hiding this comment.
I thought we might wanted to wait until it's officially released, but I don't have any strong opinions about it.
There was a problem hiding this comment.
the app dir actually requires react 19 (and you have automatically been using a canary version of it since next 13 if you've been app-dirring)
Description
Issue with react-day-picker: https://nav-it.slack.com/archives/C7NE7A8UF/p1729591976799829
Upgrading to 8.10.1 seems to fix it. I didn't get the same error message as reported in Slack though.
Issue with Slot: https://nav-it.slack.com/archives/C7NE7A8UF/p1729598429628389?thread_ts=1729591976.799829&cid=C7NE7A8UF
It's just a warning, but can be annoying. Fixed by using ref from props when possible.
https://react.dev/blog/2024/04/25/react-19-upgrade-guide#deprecated-element-ref
You can recreate by either using the next-appdir example instance, or by upgrading to React in the root package.json:
There might be other issues that I don't know about, but this will at least fix the immediate issues reported in Slack.
Component Checklist 📝
@navikt/core/css/config/_mappings.js)@navikt/core/css/tokens.json)@navikt/aksel-stylelint/src/deprecations.ts)@navikt/core/react/src/index.tsand@navikt/core/react/package.json)@navikt/core/css/index.css)<Component>: <gitmoji?> <Text>.E.g. "Button: ✨ Add feature xyz.")