Accordion throwing Error in Next.js
willTastyMakers opened this issue · comments
Description
Whenever I load, the Accordion component in a next.js (14.0.4),the following error occurs.
⨯ Internal error: TypeError: Cannot read properties of undefined (reading 'includes')
at getItemState (./node_modules/.pnpm/@zag-js+accordion@0.38.0/node_modules/@zag-js/accordion/dist/index.mjs:62:27)
at Object.getItemProps (./node_modules/.pnpm/@zag-js+accordion@0.38.0/node_modules/@zag-js/accordion/dist/index.mjs:79:31)
at eval (./node_modules/.pnpm/@ark-ui+react@2.2.2_@internationalized+date@3.5.2_react-dom@18.2.0_react@18.2.0/node_modules/@ark-ui/react/accordion/accordion-item.mjs:27:91)
at renderWithHooks (./node_modules/.pnpm/next@14.0.4_@babel+core@7.22.10_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8247:26)
at renderForwardRef (./node_modules/.pnpm/next@14.0.4_@babel+core@7.22.10_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8435:28)
at renderElement (./node_modules/.pnpm/next@14.0.4_@babel+core@7.22.10_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8591:29)
at renderNodeDestructiveImpl (./node_modules/.pnpm/next@14.0.4_@babel+core@7.22.10_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8780:33)
at renderNodeDestructive (./node_modules/.pnpm/next@14.0.4_@babel+core@7.22.10_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8737:28)
at renderNode (./node_modules/.pnpm/next@14.0.4_@babel+core@7.22.10_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9054:28)
at renderChildrenArray (./node_modules/.pnpm/next@14.0.4_@babel+core@7.22.10_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8966:17)
✓ Compiled /favicon.ico in 367ms (44 modules)
While the error occurred with custom Accordion component, I used the ark-ui example to make sure there was nothing unique to my component that was causing the error
'use client';
import { Accordion} from '@ark-ui/react'
....
<Accordion.Root defaultValue={['React']} collapsible>
{['React', 'Solid', 'Vue'].map((item, id) => (
<Accordion.Item key={id} value={item}>
<Accordion.ItemTrigger>
{item}
<Accordion.ItemIndicator>
<HiChevronDown />
</Accordion.ItemIndicator>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
{item} is a JavaScript library for building user interfaces.
</Accordion.ItemContent>
</Accordion.Item>
))}
</Accordion.Root>
This does not prevent the code from running but does propagate error.
Link to Reproduction (or Detailed Explanation)
https://codesandbox.io/p/github/willTastyMakers/ark-ui-report/main
Steps to Reproduce
- Go to [ codesanbox link](https://codesandbox.io/p/github/willTastyMakers/ark-ui-report/main
] - wait for app to load and you will see 3 Errors
- Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching
See more info here: https://nextjs.org/docs/messages/react-hydration-error
2.Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching
See more info here: https://nextjs.org/docs/messages/react-hydration-error
3. Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
When I run this code on my machine I only get the error posted in Description.
Ark UI Version
"^2.2.2"
Framework
- React
- Solid
- Vue
Browser
Chrome Version 121.0.6167.18
Additional Information
No response
The errors happens quickly in the CodeSandbox and I have to open up devtools in chrome to see the Error
Hey @willTastyMakers!
I am unfortunately not seeing any errors when view the CodeSandbox reproduction you provided. I even did my own in Stackblitz with the Next App router with no issue. 🤔
Hi @TylerAPfledderer ,
I am seeing it in the codesandbox. Try opening the console output under the codesandbox browser, and then hitting the refresh button on the browser. Here is the screen grab from just now with some annotations.
Thanks for reporting this issue. Just like @TylerAPfledderer I can not spot any issue (incl the standalone app https://fny3p3-3000.csb.app/)
Please re-open an issue with a different reproduction method.
PS. You should not need use client in your example.
I can see the hydration errors when I follow the code sandbox link.
Screenshot from my browser above. I am using Chrome v122.0.6261.94
Why is the issue being closed. It is still an issues
@cschroeter , @TylerAPfledderer
This issue has not been fixed. I don't know why you aren't seeing this but others are
@willTastyMakers it is closed because it can not be reproduced - not in Chrome, Brave or Firefox
Looking at the amount of add-ons you have, you may want to try to open this link without any of them active
Interesting, I just reproduced it in Firefox, Chrome, Arc, and Safari -- all extensions disabled in Safari.
There is nothing that should alter the DOM after the server returned the response. I also use the Accordion in many places with no issue.
I would love to help but without seeing the issue I kinda stuck