diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 474c86bcae3a..0a4c5300bba3 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -69,8 +69,7 @@ const babelIncludeRegexes: RegExp[] = [
/next[\\/]dist[\\/](esm[\\/])?shared[\\/]lib/,
/next[\\/]dist[\\/](esm[\\/])?client/,
/next[\\/]dist[\\/](esm[\\/])?pages/,
- /[\\/](strip-ansi|ansi-regex)[\\/]/,
- /styled-jsx[\\/]/,
+ /[\\/](strip-ansi|ansi-regex|styled-jsx)[\\/]/,
]
const BABEL_CONFIG_FILES = [
diff --git a/test/development/project-directory-with-styled-jsx-suffix/index.test.ts b/test/development/project-directory-with-styled-jsx-suffix/index.test.ts
new file mode 100644
index 000000000000..c2ccb3273ae0
--- /dev/null
+++ b/test/development/project-directory-with-styled-jsx-suffix/index.test.ts
@@ -0,0 +1,26 @@
+import { createNext } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { renderViaHTTP } from 'next-test-utils'
+
+describe('project directory with styled-jsx suffix', () => {
+ let next: NextInstance
+
+ beforeAll(async () => {
+ next = await createNext({
+ files: {
+ 'pages/index.js': `
+ export default function Page() {
+ return
hello world
+ }
+ `,
+ },
+ dirSuffix: '-styled-jsx',
+ })
+ })
+ afterAll(() => next.destroy())
+
+ it('should work', async () => {
+ const html = await renderViaHTTP(next.url, '/')
+ expect(html).toContain('hello world')
+ })
+})
diff --git a/test/lib/create-next-install.js b/test/lib/create-next-install.js
index 224cb1824ad0..2f1e222d7933 100644
--- a/test/lib/create-next-install.js
+++ b/test/lib/create-next-install.js
@@ -11,17 +11,18 @@ async function createNextInstall(
dependencies,
installCommand,
packageJson = {},
- packageLockPath = ''
+ packageLockPath = '',
+ dirSuffix = ''
) {
const tmpDir = await fs.realpath(process.env.NEXT_TEST_DIR || os.tmpdir())
const origRepoDir = path.join(__dirname, '../../')
const installDir = path.join(
tmpDir,
- `next-install-${randomBytes(32).toString('hex')}`
+ `next-install-${randomBytes(32).toString('hex')}${dirSuffix}`
)
const tmpRepoDir = path.join(
tmpDir,
- `next-repo-${randomBytes(32).toString('hex')}`
+ `next-repo-${randomBytes(32).toString('hex')}${dirSuffix}`
)
// ensure swc binary is present in the native folder if
diff --git a/test/lib/e2e-utils.ts b/test/lib/e2e-utils.ts
index 3a8986801836..df3c457da9ba 100644
--- a/test/lib/e2e-utils.ts
+++ b/test/lib/e2e-utils.ts
@@ -1,7 +1,6 @@
import path from 'path'
import assert from 'assert'
-import { NextConfig } from 'next'
-import { InstallCommand, NextInstance, PackageJson } from './next-modes/base'
+import { NextInstance, NextInstanceOpts } from './next-modes/base'
import { NextDevInstance } from './next-modes/next-dev'
import { NextStartInstance } from './next-modes/next-start'
import { NextDeployInstance } from './next-modes/next-deploy'
@@ -110,24 +109,9 @@ if (typeof afterAll === 'function') {
* test mode. The next instance will be isolated from the monorepo
* to prevent relying on modules that shouldn't be
*/
-export async function createNext(opts: {
- files:
- | FileRef
- | {
- [filename: string]: string | FileRef
- }
- dependencies?: {
- [name: string]: string
- }
- nextConfig?: NextConfig
- skipStart?: boolean
- installCommand?: InstallCommand
- buildCommand?: string
- packageJson?: PackageJson
- startCommand?: string
- packageLockPath?: string
- env?: Record
-}): Promise {
+export async function createNext(
+ opts: NextInstanceOpts & { skipStart?: boolean }
+): Promise {
try {
if (nextInstance) {
throw new Error(`createNext called without destroying previous instance`)
diff --git a/test/lib/next-modes/base.ts b/test/lib/next-modes/base.ts
index 2e9b7432f9cc..d703f9e69e58 100644
--- a/test/lib/next-modes/base.ts
+++ b/test/lib/next-modes/base.ts
@@ -13,71 +13,45 @@ export type InstallCommand =
| ((ctx: { dependencies: { [key: string]: string } }) => string)
export type PackageJson = {
+ dependencies?: { [key: string]: string }
[key: string]: unknown
}
+export interface NextInstanceOpts {
+ files: FileRef | { [filename: string]: string | FileRef }
+ dependencies?: { [name: string]: string }
+ packageJson?: PackageJson
+ packageLockPath?: string
+ nextConfig?: NextConfig
+ installCommand?: InstallCommand
+ buildCommand?: string
+ startCommand?: string
+ env?: Record
+ dirSuffix?: string
+}
+
export class NextInstance {
- protected files:
- | FileRef
- | {
- [filename: string]: string | FileRef
- }
+ protected files: FileRef | { [filename: string]: string | FileRef }
protected nextConfig?: NextConfig
protected installCommand?: InstallCommand
protected buildCommand?: string
protected startCommand?: string
- protected dependencies?: { [name: string]: string }
- protected events: { [eventName: string]: Set }
+ protected dependencies?: PackageJson['dependencies'] = {}
+ protected events: { [eventName: string]: Set } = {}
public testDir: string
- protected isStopping: boolean
- protected isDestroyed: boolean
+ protected isStopping: boolean = false
+ protected isDestroyed: boolean = false
protected childProcess: ChildProcess
protected _url: string
protected _parsedUrl: URL
- protected packageJson: PackageJson
+ protected packageJson?: PackageJson = {}
protected packageLockPath?: string
protected basePath?: string
protected env?: Record
public forcedPort?: string
+ public dirSuffix: string = ''
- constructor({
- files,
- dependencies,
- nextConfig,
- installCommand,
- buildCommand,
- startCommand,
- packageJson = {},
- packageLockPath,
- env,
- }: {
- files:
- | FileRef
- | {
- [filename: string]: string | FileRef
- }
- dependencies?: {
- [name: string]: string
- }
- packageJson?: PackageJson
- packageLockPath?: string
- nextConfig?: NextConfig
- installCommand?: InstallCommand
- buildCommand?: string
- startCommand?: string
- env?: Record
- }) {
- this.files = files
- this.dependencies = dependencies
- this.nextConfig = nextConfig
- this.installCommand = installCommand
- this.buildCommand = buildCommand
- this.startCommand = startCommand
- this.packageJson = packageJson
- this.packageLockPath = packageLockPath
- this.events = {}
- this.isDestroyed = false
- this.isStopping = false
- this.env = env
+ constructor(opts: NextInstanceOpts) {
+ Object.assign(this, opts)
}
protected async createTestDir({
@@ -94,7 +68,7 @@ export class NextInstance {
: process.env.NEXT_TEST_DIR || (await fs.realpath(os.tmpdir()))
this.testDir = path.join(
tmpDir,
- `next-test-${Date.now()}-${(Math.random() * 1000) | 0}`
+ `next-test-${Date.now()}-${(Math.random() * 1000) | 0}${this.dirSuffix}`
)
const reactVersion = process.env.NEXT_TEST_REACT_VERSION || 'latest'
@@ -102,7 +76,7 @@ export class NextInstance {
react: reactVersion,
'react-dom': reactVersion,
...this.dependencies,
- ...((this.packageJson.dependencies as object | undefined) || {}),
+ ...this.packageJson?.dependencies,
}
if (skipInstall) {
@@ -147,7 +121,8 @@ export class NextInstance {
finalDependencies,
this.installCommand,
this.packageJson,
- this.packageLockPath
+ this.packageLockPath,
+ this.dirSuffix
)
}
require('console').log('created next.js install, writing test files')