diff --git a/examples/esm/.gitignore b/examples/esm/.gitignore
new file mode 100644
index 000000000000000..1437c53f70bc211
--- /dev/null
+++ b/examples/esm/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
diff --git a/examples/esm/package.json b/examples/esm/package.json
new file mode 100644
index 000000000000000..4611e0b34c614ec
--- /dev/null
+++ b/examples/esm/package.json
@@ -0,0 +1,14 @@
+{
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "next",
+ "build": "next build",
+ "start": "next start"
+ },
+ "dependencies": {
+ "next": "latest",
+ "react": "^18.0.0",
+ "react-dom": "^18.0.0"
+ }
+}
diff --git a/examples/esm/pages/index.js b/examples/esm/pages/index.js
new file mode 100644
index 000000000000000..ff7159d9149feeb
--- /dev/null
+++ b/examples/esm/pages/index.js
@@ -0,0 +1,3 @@
+export default function Page() {
+ return
hello world
+}
diff --git a/examples/esm/pages/modules.js b/examples/esm/pages/modules.js
new file mode 100644
index 000000000000000..0aafdf056102108
--- /dev/null
+++ b/examples/esm/pages/modules.js
@@ -0,0 +1,13 @@
+import Link from 'next/link'
+import Image from 'next/image'
+
+export default function Modules() {
+ return (
+ <>
+
+ link to home
+
+
+ >
+ )
+}
diff --git a/packages/next/taskfile-swc.js b/packages/next/taskfile-swc.js
index 38395cc19aefb04..c1e78d2496d88ad 100644
--- a/packages/next/taskfile-swc.js
+++ b/packages/next/taskfile-swc.js
@@ -14,7 +14,11 @@ module.exports = function (task) {
function* (
file,
serverOrClient,
- { stripExtension, keepImportAssertions = false } = {}
+ {
+ stripExtension,
+ keepImportAssertions = false,
+ interopClientDefaultExport = false,
+ } = {}
) {
// Don't compile .d.ts
if (file.base.endsWith('.d.ts')) return
@@ -113,6 +117,15 @@ module.exports = function (task) {
if (output.map) {
const map = `${file.base}.map`
+ if (interopClientDefaultExport) {
+ output.code += `
+if (typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) {
+ Object.assign(exports.default, exports);
+ module.exports = exports.default;
+}
+`
+ }
+
output.code += Buffer.from(`\n//# sourceMappingURL=${map}`)
// add sourcemap to `files` array
diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js
index fc4a1ee697fa957..c9064ba074d39c9 100644
--- a/packages/next/taskfile.js
+++ b/packages/next/taskfile.js
@@ -1826,7 +1826,7 @@ export async function nextbuild(task, opts) {
export async function client(task, opts) {
await task
.source(opts.src || 'client/**/*.+(js|ts|tsx)')
- .swc('client', { dev: opts.dev })
+ .swc('client', { dev: opts.dev, interopClientDefaultExport: true })
.target('dist/client')
notify('Compiled client files')
}
diff --git a/test/e2e/type-module-interop/index.test.ts b/test/e2e/type-module-interop/index.test.ts
index 2d3f419e2103de5..be330b37214cf2e 100644
--- a/test/e2e/type-module-interop/index.test.ts
+++ b/test/e2e/type-module-interop/index.test.ts
@@ -19,10 +19,16 @@ describe('Type module interop', () => {
import Link from 'next/link'
import Image from 'next/image'
- return <>
- link to home
-
- >
+ export default function Modules() {
+ return (
+ <>
+
+ link to home
+
+
+ >
+ )
+ }
`,
},
dependencies: {},