search

formaat-design / reshaped

Community repository for storing examples, reporting issues and tracking roadmap
https://reshaped.so
97 stars 3 forks source link

Tabs.List TypeError: r is not a function #197

Closed jkbreunig closed 7 months ago

jkbreunig commented 7 months ago

Describe the bug Including Tabs.List component causes runtime error in Next.JS 14 project

react-dom.development.js:20662 Uncaught TypeError: r is not a function
    at eval (webpack-internal:///(:3001/app-pages-browser)/./node_modules/.pnpm/reshaped@2.5.9_postcss@8.4.31_react-dom@18.2.0_react@18.2.0/node_modules/reshaped/bundle.js:27:45343)
    at commitHookEffectListMount (webpack-internal:///(:3001/app-pages-browser)/./node_modules/.pnpm/next@14.0.2_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20995:23)
    at invokePassiveEffectMountInDEV (webpack-internal:///(:3001/app-pages-browser)/./node_modules/.pnpm/next@14.0.2_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:23874:13)
    at invokeEffectsInDev (webpack-internal:///(:3001/app-pages-browser)/./node_modules/.pnpm/next@14.0.2_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:26663:9)
    at legacyCommitDoubleInvokeEffectsInDEV (webpack-internal:///(:3001/app-pages-browser)/./node_modules/.pnpm/next@14.0.2_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:26646:5)
    at commitDoubleInvokeEffectsInDEV (webpack-internal:///(:3001/app-pages-browser)/./node_modules/.pnpm/next@14.0.2_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:26627:7)
    at flushPassiveEffectsImpl (webpack-internal:///(:3001/app-pages-browser)/./node_modules/.pnpm/next@14.0.2_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:26336:5)
    at flushPassiveEffects (webpack-internal:///(:3001/app-pages-browser)/./node_modules/.pnpm/next@14.0.2_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:26260:14)
    at performSyncWorkOnRoot (webpack-internal:///(:3001/app-pages-browser)/./node_modules/.pnpm/next@14.0.2_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24707:32)
    at flushSyncWorkAcrossRoots_impl (webpack-internal:///(:3001/app-pages-browser)/./node_modules/.pnpm/next@14.0.2_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:10274:13)
    at flushSyncWorkOnAllRoots (webpack-internal:///(:3001/app-pages-browser)/./node_modules/.pnpm/next@14.0.2_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:10234:3)
    at commitRootImpl (webpack-internal:///(:3001/app-pages-browser)/./node_modules/.pnpm/next@14.0.2_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:26191:3)
    at commitRoot (webpack-internal:///(:3001/app-pages-browser)/./node_modules/.pnpm/next@14.0.2_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:25904:5)
    at commitRootWhenReady (webpack-internal:///(:3001/app-pages-browser)/./node_modules/.pnpm/next@14.0.2_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24624:3)
    at finishConcurrentRender (webpack-internal:///(:3001/app-pages-browser)/./node_modules/.pnpm/next@14.0.2_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24589:5)
    at performConcurrentWorkOnRoot (webpack-internal:///(:3001/app-pages-browser)/./node_modules/.pnpm/next@14.0.2_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24434:9)
    at workLoop (webpack-internal:///(:3001/app-pages-browser)/./node_modules/.pnpm/next@14.0.2_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:261:34)
    at flushWork (webpack-internal:///(:3001/app-pages-browser)/./node_modules/.pnpm/next@14.0.2_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:230:14)
    at MessagePort.performWorkUntilDeadline (webpack-internal:///(:3001/app-pages-browser)/./node_modules/.pnpm/next@14.0.2_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:534:21)

eval node_modules/.pnpm/reshaped@2.5.9_postcss@8.4.31_react-dom@18.2.0_react@18.2.0/node_modules/reshaped/bundle.js (27:45377)

To Reproduce

<View paddingInline={8}>
    <Tabs variant="borderless">
      <Tabs.List>
        <Tabs.Item value="1">Item 1</Tabs.Item>
        <Tabs.Item value="2">Long item 2</Tabs.Item>
        <Tabs.Item value="3">Very long item 3</Tabs.Item>
      </Tabs.List>
    </Tabs>
  </View>

Expected behavior Using Tabs example should not cause error

Environment (please complete the following information):

Additional context Removing Tabs.List resolves the error

<View paddingInline={8}>
    <Tabs variant="borderless">
     {/* <Tabs.List> */}
        <Tabs.Item value="1">Item 1</Tabs.Item>
        <Tabs.Item value="2">Long item 2</Tabs.Item>
        <Tabs.Item value="3">Very long item 3</Tabs.Item>
      {/* </Tabs.List> */}
    </Tabs>
  </View>
blvdmitry commented 7 months ago

Thanks for reporting, I assume it's a similar issue to https://github.com/formaat-design/reshaped/issues/194, so I'll ship a patch for that today. Does the same happen if you add "use client" to your component?

jkbreunig commented 7 months ago

Does the same happen if you add "use client" to your component?

yes

blvdmitry commented 7 months ago

I've just tried adding it to the Next.js App router starter and it seems to work:

image

However there is one thing I've thought of – can you make sure your application is wrapped with a Reshaped provider? r might be a minified name for the function called from the Reshaped context by tabs to assign the keyboard hotkeys for its accessibility

jkbreunig commented 7 months ago

wrapping the application with a Reshaped provider resolved the issue. Thanks!