diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js
index 67f660129e6e..b38d7f37756a 100644
--- a/packages/next/taskfile.js
+++ b/packages/next/taskfile.js
@@ -57,18 +57,31 @@ export async function copy_styled_jsx_assets(task, opts) {
   // dev dep `styled-jsx` and `next/dist/styled-jsx` for duplicated declare modules
   const typesDir = join(outputDir, 'types')
   let typeReferences = ''
+  let globalTypesContent = ''
 
   await fs.ensureDir(outputDir)
   await fs.ensureDir(typesDir)
 
   for (const file of typeFiles) {
     const fileNoExt = file.replace(/\.d\.ts/, '')
-    const content = await fs.readFile(join(styledJsxPath, file), 'utf8')
+    let content = await fs.readFile(join(styledJsxPath, file), 'utf8')
+
+    if (file === 'index.d.ts') {
+      const styledJsxIdx = content.indexOf(`declare module 'styled-jsx' {`)
+      globalTypesContent = content.substring(0, styledJsxIdx)
+      content = content
+        .substring(styledJsxIdx)
+        .replace('React.', `import('react').`)
+    }
+
     await fs.writeFile(join(typesDir, file), content)
     typeReferences += `/// <reference types="./${fileNoExt}" />\n`
   }
 
-  await fs.writeFile(join(typesDir, 'global.d.ts'), typeReferences)
+  await fs.writeFile(
+    join(typesDir, 'global.d.ts'),
+    `${typeReferences}\n${globalTypesContent}`
+  )
 
   for (const file of jsFiles) {
     const content = await fs.readFile(join(styledJsxPath, file), 'utf8')
diff --git a/test/production/typescript-basic/app/pages/index.tsx b/test/production/typescript-basic/app/pages/index.tsx
index 85950f2e3452..e974da66bbaf 100644
--- a/test/production/typescript-basic/app/pages/index.tsx
+++ b/test/production/typescript-basic/app/pages/index.tsx
@@ -1,6 +1,8 @@
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import { type PageConfig } from 'next'
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
 
 export const config: PageConfig = {}