From 6e729b8fb44e45b9a1efa3cbd16a99636d093fe6 Mon Sep 17 00:00:00 2001
From: Kim In Seop <opnayn@gmail.com>
Date: Fri, 18 Aug 2023 12:44:54 +0900
Subject: [PATCH 1/2] fix: invalid module transform for `@headlessui/react`

occured since #54188

- *: use kebabcase instead of lowercase
- Transition: `components/transitions/transition`
- Tab: `components/tabs/tabs`
---
 packages/next/src/server/config.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/next/src/server/config.ts b/packages/next/src/server/config.ts
index 9580def50d7e..8504a52a0f08 100644
--- a/packages/next/src/server/config.ts
+++ b/packages/next/src/server/config.ts
@@ -722,8 +722,12 @@ function assignDefaults(
       },
     },
     '@headlessui/react': {
-      transform:
-        'modularize-import-loader?name={{member}}&join=./components/{{lowerCase member}}/{{lowerCase member}}!@headlessui/react',
+      transform: {
+        Transition:
+          'modularize-import-loader?name={{member}}&join=./components/transitions/transition!@headlessui/react',
+        Tab: 'modularize-import-loader?name={{member}}&join=./components/tabs/tabs!@headlessui/react',
+        '*': 'modularize-import-loader?name={{member}}&join=./components/{{ kebabCase member }}/{{ kebabCase member }}!@headlessui/react',
+      },
       skipDefaultConversion: true,
     },
     '@heroicons/react/20/solid': {

From ac5f0001b65548cf846366e21b6f5759e1e3d382 Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Fri, 18 Aug 2023 12:26:25 +0200
Subject: [PATCH 2/2] add test case

---
 .../basic/modularize-imports.test.ts          |  1 +
 .../basic/modularize-imports/app/page.js      | 26 +++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/test/development/basic/modularize-imports.test.ts b/test/development/basic/modularize-imports.test.ts
index 4e115c8688dc..a417c7739706 100644
--- a/test/development/basic/modularize-imports.test.ts
+++ b/test/development/basic/modularize-imports.test.ts
@@ -12,6 +12,7 @@ describe('modularize-imports', () => {
       },
       dependencies: {
         'lucide-react': '0.264.0',
+        '@headlessui/react': '1.7.17',
       },
     })
   })
diff --git a/test/development/basic/modularize-imports/app/page.js b/test/development/basic/modularize-imports/app/page.js
index c5b832cbf3cb..c327c4d2142f 100644
--- a/test/development/basic/modularize-imports/app/page.js
+++ b/test/development/basic/modularize-imports/app/page.js
@@ -1,3 +1,5 @@
+'use client'
+
 import {
   IceCream,
   BackpackIcon,
@@ -21,6 +23,8 @@ import {
   TextSelection,
 } from 'lucide-react'
 
+import { Tab, RadioGroup, Transition } from '@headlessui/react'
+
 export default function Page() {
   return (
     <>
@@ -44,6 +48,28 @@ export default function Page() {
       <Edit2 />
       <LucideEdit3 />
       <TextSelection />
+      <Tab.Group>
+        <Tab.List>
+          <Tab>Tab 1</Tab>
+          <Tab>Tab 2</Tab>
+          <Tab>Tab 3</Tab>
+        </Tab.List>
+        <Tab.Panels>
+          <Tab.Panel>Content 1</Tab.Panel>
+          <Tab.Panel>Content 2</Tab.Panel>
+          <Tab.Panel>Content 3</Tab.Panel>
+        </Tab.Panels>
+      </Tab.Group>
+      <RadioGroup>
+        <RadioGroup.Label>Plan</RadioGroup.Label>
+        <RadioGroup.Option value="startup">
+          {({ checked }) => <span>{checked ? 'checked' : ''} Startup</span>}
+        </RadioGroup.Option>
+        <RadioGroup.Option value="business">
+          {({ checked }) => <span>{checked ? 'checked' : ''} Business</span>}
+        </RadioGroup.Option>
+      </RadioGroup>
+      <Transition show>I will fade in and out</Transition>
     </>
   )
 }