Direct use of ariakit + indirect use of ariakit through Shoreline, together, seems to break

marcelovicentegc commented 1 month ago

Summary

Not sure yet if we can generalize, but the direct use of ariakit (Menu) + Shoreline components that depend on it (Popover), break apps (Next.js application 14) :exploding_head:

I caught this while dealing with a merge between two PRs (https://github.com/vtex/admin-platform/pull/140 and https://github.com/vtex/admin-platform/pull/162), both working separately, but breaking when merged. One PR implementing changes which require direct use of ariakit's Menu component, and the other PR implementing changes which make indirect use of ariakit's Popover components.

The error Internal error: TypeError: render is not a function (stack trace below)

The render function is available at both ariakit versions used directly (0.4.7, https://github.com/vtex/admin-platform/pull/140) and indirectly, via Shoreline (0.4.5, https://github.com/vtex/admin-platform/pull/162).

Tested the following:

Locking ariakit version on 0.4.5 and on 0.4.7 (via package.json overrides). No success.
Executed several clean installs (excluding pnpm cache, lockfiles, node_modules, everything) with both versions (0.4.5 and 0.4.7) locked. No success.
Tried rendering components on SSR and CSR on both ariakit versions as well to check if it could be some divergence between Node and Browser environments. No success.

The paliative resolution was to change the PR which made use of ariakit indirectly and make direct use of it. This worked.

Expected behavior

Direct and indirect use of ariakit on applications should work seamlessly.

Current behavior

⨯ ../node_modules/.pnpm/@ariakit+react-core@0.4.5_react-dom@18.2.0_react@18.3.1/node_modules/@ariakit/react-core/esm/__chunks/GUCZNEAD.js (34:14) @ render

⨯ Internal error: TypeError: render is not a function
    at createElement (../../node_modules/.pnpm/@ariakit+react-core@0.4.5_react-dom@18.2.0_react@18.3.1/node_modules/@ariakit/react-core/esm/__chunks/GUCZNEAD.js:43:19)
    at Popover2 (../../node_modules/.pnpm/@ariakit+react-core@0.4.5_react-dom@18.2.0_react@18.3.1/node_modules/@ariakit/react-core/esm/__chunks/6YVAEELE.js:328:71)
    at eval (../../node_modules/.pnpm/@ariakit+react-core@0.4.5_react-dom@18.2.0_react@18.3.1/node_modules/@ariakit/react-core/esm/__chunks/GUCZNEAD.js:21:92)
    at as (/home/marcelo/Documents/admin-platform/node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:6391)
    at aw (/home/marcelo/Documents/admin-platform/node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:41363)
    at ak (/home/marcelo/Documents/admin-platform/node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46552)
    at av (/home/marcelo/Documents/admin-platform/node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:7809)
    at aw (/home/marcelo/Documents/admin-platform/node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:41388)
    at ak (/home/marcelo/Documents/admin-platform/node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46552)
    at av (/home/marcelo/Documents/admin-platform/node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:7809)
    at aw (/home/marcelo/Documents/admin-platform/node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:41388)
    at aw (/home/marcelo/Documents/admin-platform/node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:43309)
    at ak (/home/marcelo/Documents/admin-platform/node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46552)
    at ax (/home/marcelo/Documents/admin-platform/node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:50458)
    at a_ (/home/marcelo/Documents/admin-platform/node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49564)

Reproducible Example

:loading:

Additional context

No response

Package

@vtex/shoreline

Packages version

1.0.0-rc.46

Browser

Brave

Package Manager

pnpm

marcelovicentegc commented 1 month ago

Sorry, I didn't mean to close this issue with the PR referencing it on the other repo :smile:

matheusps commented 1 week ago

It may be related to the pnpm 9 update. I fixed by re-enabling the link-workspace-packages https://github.com/pnpm/pnpm/releases/tag/v9.0.0.

matheusps commented 1 week ago

Also, typescript version update seems to help on this. Closing for now, we will reopen if the issue continues

vtex / shoreline