diff --git a/packages/next/build/swc/options.js b/packages/next/build/swc/options.js
index 33ed7b9d00eaa72..eeddb42fa76a24b 100644
--- a/packages/next/build/swc/options.js
+++ b/packages/next/build/swc/options.js
@@ -64,9 +64,9 @@ function getBaseSWCOptions({
legacyDecorator: enableDecorators,
decoratorMetadata: emitDecoratorMetadata,
react: {
- importSource: nextConfig?.experimental?.emotion
- ? '@emotion/react'
- : jsConfig?.compilerOptions?.jsxImportSource || 'react',
+ importSource:
+ jsConfig?.compilerOptions?.jsxImportSource ??
+ (nextConfig?.experimental?.emotion ? '@emotion/react' : 'react'),
runtime: 'automatic',
pragma: 'React.createElement',
pragmaFrag: 'React.Fragment',
diff --git a/test/development/basic/emotion-swc.test.ts b/test/development/basic/emotion-swc.test.ts
new file mode 100644
index 000000000000000..94a867738950a2a
--- /dev/null
+++ b/test/development/basic/emotion-swc.test.ts
@@ -0,0 +1,43 @@
+import { join } from 'path'
+import webdriver from 'next-webdriver'
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+
+describe('emotion SWC option', () => {
+ let next: NextInstance
+
+ beforeAll(async () => {
+ next = await createNext({
+ files: {
+ 'jsconfig.json': new FileRef(
+ join(__dirname, 'emotion-swc/jsconfig.json')
+ ),
+ pages: new FileRef(join(__dirname, 'emotion-swc/pages')),
+ shared: new FileRef(join(__dirname, 'emotion-swc/shared')),
+ 'next.config.js': new FileRef(
+ join(__dirname, 'emotion-swc/next.config.js')
+ ),
+ },
+ dependencies: {
+ '@emotion/core': '^10.0.35',
+ '@emotion/styled': '^10.0.27',
+ },
+ })
+ })
+ afterAll(() => next.destroy())
+
+ it('should have styling from the css prop', async () => {
+ let browser
+ try {
+ browser = await webdriver(next.appPort, '/')
+ const color = await browser
+ .elementByCss('#test-element')
+ .getComputedCss('background-color')
+ expect(color).toBe('rgb(255, 192, 203)')
+ } finally {
+ if (browser) {
+ await browser.close()
+ }
+ }
+ })
+})
diff --git a/test/development/basic/emotion-swc/jsconfig.json b/test/development/basic/emotion-swc/jsconfig.json
new file mode 100644
index 000000000000000..fbc6d6632af6547
--- /dev/null
+++ b/test/development/basic/emotion-swc/jsconfig.json
@@ -0,0 +1,5 @@
+{
+ "compilerOptions": {
+ "jsxImportSource": "@emotion/core"
+ }
+}
diff --git a/test/development/basic/emotion-swc/next.config.js b/test/development/basic/emotion-swc/next.config.js
new file mode 100644
index 000000000000000..0928286e81ee73b
--- /dev/null
+++ b/test/development/basic/emotion-swc/next.config.js
@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+
+const nextConfig = {
+ reactStrictMode: true,
+ experimental: {
+ emotion: true,
+ },
+}
+
+module.exports = nextConfig
diff --git a/test/development/basic/emotion-swc/pages/_app.js b/test/development/basic/emotion-swc/pages/_app.js
new file mode 100644
index 000000000000000..3e1494230f77900
--- /dev/null
+++ b/test/development/basic/emotion-swc/pages/_app.js
@@ -0,0 +1,15 @@
+import createCache from '@emotion/cache'
+import { CacheProvider } from '@emotion/core'
+
+import { globalStyles } from '../shared/styles'
+
+const cache = createCache({ key: 'next' })
+
+const App = ({ Component, pageProps }) => (
+
:hover
.
+