fix: invalid module transform for @headlessui/react

[opnay]

occured since #54188

• *: use kebabcase instead of lowercase
• Transition: components/transitions/transition
• Tab: components/tabs/tabs

- wait compiling /not-found (client and server)...
- error ./node_modules/.pnpm/@headlessui+react@1.7.17_react-dom@18.2.0_react@18.2.0/node_modules/@headlessui/react/dist/headlessui.esm.js:2:0
Module not found: Can't resolve '/Projects/node_modules/.pnpm/@headlessui+react@1.7.17_react-dom@18.2.0_react@18.2.0/node_modules/@headlessui/react/dist/components/tab/tab'

[vercel-spaces]

Notifying the following users due to files changed in this PR based on this repo's notify modifiers:

@timneutkens, @ijjk, @shuding, @styfle, @huozhi:

packages/next/src/server/config.ts

[vercel-spaces-staging]

Notifying the following users due to files changed in this PR based on this repo's notify modifiers:

@timneutkens, @ijjk, @shuding, @styfle, @huozhi:

packages/next/src/server/config.ts

[vercel-spaces-staging]

Notifying the following users due to files changed in this PR based on this repo's notify modifiers:

@timneutkens, @ijjk, @shuding, @styfle, @huozhi:

packages/next/src/server/config.ts

[vercel-spaces]

Notifying the following users due to files changed in this PR based on this repo's notify modifiers:

@timneutkens, @ijjk, @shuding, @styfle, @huozhi:

packages/next/src/server/config.ts

[vercel-spaces-staging]

Notifying the following users due to files changed in this PR based on this repo's notify modifiers:

@timneutkens, @ijjk, @shuding, @styfle, @huozhi:

packages/next/src/server/config.ts

[vercel-spaces]

Notifying the following users due to files changed in this PR based on this repo's notify modifiers:

@timneutkens, @ijjk, @shuding, @styfle, @huozhi:

packages/next/src/server/config.ts

[vercel-spaces]

Notifying the following users due to files changed in this PR based on this repo's notify modifiers:

@timneutkens, @ijjk, @shuding, @styfle, @huozhi:

packages/next/src/server/config.ts

[vercel-spaces-staging]

Notifying the following users due to files changed in this PR based on this repo's notify modifiers:

@timneutkens, @ijjk, @shuding, @styfle, @huozhi:

packages/next/src/server/config.ts

[vercel-spaces]

Notifying the following users due to files changed in this PR based on this repo's notify modifiers:

@timneutkens, @ijjk, @shuding, @styfle, @huozhi:

packages/next/src/server/config.ts

[vercel-spaces]

Notifying the following users due to files changed in this PR based on this repo's notify modifiers:

@timneutkens, @ijjk, @shuding, @styfle, @huozhi:

packages/next/src/server/config.ts

[vercel-spaces-staging]

Notifying the following users due to files changed in this PR based on this repo's notify modifiers:

@timneutkens, @ijjk, @shuding, @styfle, @huozhi:

packages/next/src/server/config.ts

[vercel-spaces-staging]

Notifying the following users due to files changed in this PR based on this repo's notify modifiers:

@timneutkens, @ijjk, @shuding, @styfle, @huozhi:

packages/next/src/server/config.ts

[vercel-spaces]

Notifying the following users due to files changed in this PR based on this repo's notify modifiers:

@timneutkens, @ijjk, @shuding, @styfle, @huozhi:

packages/next/src/server/config.ts

[weyert]

@shuding This is not fixing the problem for unit tests:

 FAIL  src/__tests__/pages/CallbackPage.test.tsx
  ● Test suite failed to run

    Cannot find module 'modularize-import-loader?name=Dialog&join=./components/dialog/dialog!@headlessui/react' from 'src/layouts/SiteLayout.tsx'

    Require stack:
      src/layouts/SiteLayout.tsx
      src/layouts/getLayoutComponent.tsx
      src/pages/auth/callback.tsx
      src/__tests__/pages/CallbackPage.test.tsx

      21 | import { useAuth } from '@/auth/usercontext/useAuth'
      22 |
    > 23 | interface SiteLayoutProps extends Omit<LayoutProps, 'Layout'> {
         |                ^
      24 |   children: React.ReactNode
      25 |   showCategoriesList?: boolean
      26 | }

      at Resolver._throwModNotFoundError (../../node_modules/.pnpm/jest-resolve@29.6.2/node_modules/jest-resolve/build/resolver.js:427:11)
      at Object.<anonymous> (src/layouts/SiteLayout.tsx:23:16)
      at Object.<anonymous> (src/layouts/getLayoutComponent.tsx:11:21)
      at Object.<anonymous> (src/pages/apps/auth/callback.tsx:37:29)
      at Object.<anonymous> (src/__tests__/pages/CallbackPage.test.tsx:13:19)

[Bowens20832]

@shuding This is not fixing the problem for unit tests:

 FAIL  src/__tests__/pages/CallbackPage.test.tsx
  ● Test suite failed to run

    Cannot find module 'modularize-import-loader?name=Dialog&join=./components/dialog/dialog!@headlessui/react' from 'src/layouts/SiteLayout.tsx'

    Require stack:
      src/layouts/SiteLayout.tsx
      src/layouts/getLayoutComponent.tsx
      src/pages/auth/callback.tsx
      src/__tests__/pages/CallbackPage.test.tsx

      21 | import { useAuth } from '@/auth/usercontext/useAuth'
      22 |
    > 23 | interface SiteLayoutProps extends Omit<LayoutProps, 'Layout'> {
         |                ^
      24 |   children: React.ReactNode
      25 |   showCategoriesList?: boolean
      26 | }

      at Resolver._throwModNotFoundError (../../node_modules/.pnpm/jest-resolve@29.6.2/node_modules/jest-resolve/build/resolver.js:427:11)
      at Object.<anonymous> (src/layouts/SiteLayout.tsx:23:16)
      at Object.<anonymous> (src/layouts/getLayoutComponent.tsx:11:21)
      at Object.<anonymous> (src/pages/apps/auth/callback.tsx:37:29)
      at Object.<anonymous> (src/__tests__/pages/CallbackPage.test.tsx:13:19)

I can confirm @timneutkens that this is still an issue while running Jest tests in the latest Next.js release.

Any suggestions on a fix?

[weyert]

Yes, I haven't figured out a way to solve this issue besides downgrading to an older version which don't have the rules defined.

[Bowens20832]

Yes, I haven't figured out a way to solve this issue besides downgrading to an older version which don't have the rules defined.

Which version worked for you?

[aguscorvo]

Yes, I haven't figured out a way to solve this issue besides downgrading to an older version which don't have the rules defined.

Which version worked for you?

@Bowens20832 13.4.12 worked for me.

[Bowens20832]

13.4.12

This works! Thank you so much 😄