Ark UI using Chakra UI v3 causes problems
Ark UI is the headless UI library underlying ChakraUI v3.
What is Ark UI?
<ul>
<li>Headless component library - provides only unstyled functionality</li>
<li>Focus on accessibility - WAI-ARIA compliant implementation</li>
<li>Multiple framework support - React, Vue, Solid supported</li>
<li>New basis for Chakra UI - moving from v3 to Ark UI base
Why is the error occurring?</li>
</ul>
<ol>
<li>compatibility issues - SSR/RSC compatibility issues with Ark UI and Next.js</li>
</ol>
<ul>
<li>Type definition error - fieldAnatomy.extendWith is not a function is an internal API inconsistency</li>
</ul>
<ol start="3">
<li>build time issue - client-specific code is executed during server-side rendering</li>
</ol>
Chakra UI v2 should do it, Claude says the component names are about the same, so I changed them, and now I need to rewrite quite a bit.
<ul>
<li>That&#39;s a big lie!</li>
<li><a href="https://github.com/team-mirai-volunteer/policy-pr-hub/commit/c9c2a6d29807a2e2302040e60d1a12d42ed217f4">https://github.com/team-mirai-volunteer/policy-pr-hub/commit/c9c2a6d29807a2e2302040e60d1a12d42ed217f4</a></li>
</ul>
Well, it worked.
<ul>
<li><a href="/en/Diary%202025-08-11">Diary 2025-08-11</a> ← Diary 2025-08-12 → <a href="/en/Diary%202025-08-13">Diary 2025-08-13</a>
100 days ago <a href="/en/Diary%202025-05-04">Diary 2025-05-04</a>.
1 year ago <a href="/en/Diary%202024-08-12">Diary 2024-08-12</a>.</li>
</ul>
<hr>
This page is auto-translated from <a href="https://scrapbox.io/nishio/%E6%97%A5%E8%A8%982025-08-12">/nishio/日記2025-08-12</a> using DeepL. If you looks something interesting but the auto-translated English is not good enough to understand it, feel free to let me know at <a href="https://twitter.com/nishio_en">@nishio_en</a>. I&#39;m very happy to spread my thought to non-Japanese readers.