next13 async component + css modules repro

mxmul · mxmul · commit c562d4dcf374 · 2022-11-03T22:15:21.000-04:00
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,10 @@
+export default function RootLayout({ children }: { children: any }) {
+  return (
+    <html>
+      <body>
+        <header>header</header>
+        <main>{children}</main>
+      </body>
+    </html>
+  );
+}
diff --git a/app/loading.tsx b/app/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return <p>Loading...</p>;
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,8 @@
+import styles from "./styles.module.css";
+
+export default async function Page() {
+  // Artificially slow the page so we can see the loading state
+  await new Promise<void>((res) => setTimeout(() => res(), 1000));
+
+  return <h2 className={styles.red}>hello world!</h2>;
+}
diff --git a/app/styles.module.css b/app/styles.module.css
@@ -0,0 +1,3 @@
+.red {
+  color: red;
+}
diff --git a/next.config.js b/next.config.js
@@ -2,6 +2,9 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
+  experimental: {
+    appDir: true,
+  },
 }
 
 module.exports = nextConfig
diff --git a/pages/_app.tsx b/pages/_app.tsx
diff --git a/pages/api/hello.ts b/pages/api/hello.ts
diff --git a/pages/index.tsx b/pages/index.tsx
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -13,8 +17,20 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default function Loading() {`
	`2`	`+ return <p>Loading...</p>;`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,9 @@`
`2`	`2`	`const nextConfig = {`
`3`	`3`	`reactStrictMode: true,`
`4`	`4`	`swcMinify: true,`
	`5`	`+ experimental: {`
	`6`	`+ appDir: true,`
	`7`	`+ },`
`5`	`8`	`}`
`6`	`9`
`7`	`10`	`module.exports = nextConfig`