diff --git a/examples/with-react-intl/package.json b/examples/with-react-intl/package.json
index b490705b161ff..9d32be5fc21a7 100644
--- a/examples/with-react-intl/package.json
+++ b/examples/with-react-intl/package.json
@@ -20,7 +20,6 @@
"@formatjs/cli": "4.2.31",
"@types/node": "16.6.2",
"@types/react": "17.0.19",
- "@types/styled-jsx": "3.4.4",
"babel-plugin-formatjs": "10.3.5",
"eslint-plugin-formatjs": "2.17.4",
"typescript": "4.3.5"
diff --git a/packages/next/lib/typescript/writeAppTypeDeclarations.ts b/packages/next/lib/typescript/writeAppTypeDeclarations.ts
index edd3e861b237e..92ebf7b86003e 100644
--- a/packages/next/lib/typescript/writeAppTypeDeclarations.ts
+++ b/packages/next/lib/typescript/writeAppTypeDeclarations.ts
@@ -30,6 +30,8 @@ export async function writeAppTypeDeclarations(
const content =
'/// ' +
eol +
+ '/// ' +
+ eol +
(imageImportsEnabled
? '/// ' + eol
: '') +
diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js
index b90e92f8b8ec6..c88d58b5a4335 100644
--- a/packages/next/taskfile.js
+++ b/packages/next/taskfile.js
@@ -40,6 +40,38 @@ export async function copy_regenerator_runtime(task, opts) {
.target('compiled/regenerator-runtime')
}
+// eslint-disable-next-line camelcase
+export async function copy_styled_jsx_types(task, opts) {
+ // we copy the styled-jsx types so that we can reference them
+ // in the next-env.d.ts file so it doesn't matter if the styled-jsx
+ // package is hoisted out of Next.js' node_modules or not
+ const styledJsxPath = dirname(require.resolve('styled-jsx/package.json'))
+ const typeFiles = glob.sync('*.d.ts', { cwd: styledJsxPath })
+ const outputDir = join(__dirname, 'dist/styled-jsx-types')
+ let typeReferences = ``
+
+ await fs.ensureDir(outputDir)
+
+ for (const file of typeFiles) {
+ const fileNoExt = file.replace(/\.d\.ts/, '')
+ const content = await fs.readFile(join(styledJsxPath, file), 'utf8')
+ const exportsIndex = content.indexOf('export')
+
+ await fs.writeFile(
+ join(outputDir, file),
+ `${content.substring(0, exportsIndex)}\n` +
+ `declare module 'styled-jsx${
+ file === 'index.d.ts' ? '' : '/' + fileNoExt
+ }' {
+ ${content.substring(exportsIndex)}
+ }`
+ )
+ typeReferences += `/// \n`
+ }
+
+ await fs.writeFile(join(outputDir, 'global.d.ts'), typeReferences)
+}
+
const externals = {
// don't bundle caniuse-lite data so users can
// update it manually
@@ -1803,6 +1835,7 @@ export async function compile(task, opts) {
// we compile this each time so that fresh runtime data is pulled
// before each publish
'ncc_amp_optimizer',
+ 'copy_styled_jsx_types',
],
opts
)
diff --git a/packages/next/types/index.d.ts b/packages/next/types/index.d.ts
index 2bee2fba94fc0..9615b46d9ec5d 100644
--- a/packages/next/types/index.d.ts
+++ b/packages/next/types/index.d.ts
@@ -1,7 +1,6 @@
///
///
///
-///
import React from 'react'
import { ParsedUrlQuery } from 'querystring'
diff --git a/test/production/typescript-basic/index.test.ts b/test/production/typescript-basic/index.test.ts
index 4ad49de99d191..09979db2b2511 100644
--- a/test/production/typescript-basic/index.test.ts
+++ b/test/production/typescript-basic/index.test.ts
@@ -28,7 +28,6 @@ describe('TypeScript basic', () => {
'@types/node': 'latest',
'@types/react': 'latest',
'@types/react-dom': 'latest',
- 'styled-jsx': 'latest',
},
})
})
diff --git a/test/unit/write-app-declarations.test.ts b/test/unit/write-app-declarations.test.ts
index 5d9df38937b4a..a14eb1a0df793 100644
--- a/test/unit/write-app-declarations.test.ts
+++ b/test/unit/write-app-declarations.test.ts
@@ -16,6 +16,8 @@ describe('find config', () => {
const content =
'/// ' +
eol +
+ '/// ' +
+ eol +
(imageImportsEnabled
? '/// ' + eol
: '') +
@@ -37,6 +39,8 @@ describe('find config', () => {
const content =
'/// ' +
eol +
+ '/// ' +
+ eol +
(imageImportsEnabled
? '/// ' + eol
: '') +
@@ -58,6 +62,8 @@ describe('find config', () => {
const content =
'/// ' +
eol +
+ '/// ' +
+ eol +
(imageImportsEnabled
? '/// ' + eol
: '') +