fix: allow user directory with styled-jsx prefix in next dev (#41484

)

Fixes #41476, ref #40679

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

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 = [

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 <p>hello world</p>
+          } 
+        `,
+      },
+      dirSuffix: '-styled-jsx',
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('should work', async () => {
+    const html = await renderViaHTTP(next.url, '/')
+    expect(html).toContain('hello world')
+  })
+})

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

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<string, string>
-}): Promise<NextInstance> {
+export async function createNext(
+  opts: NextInstanceOpts & { skipStart?: boolean }
+): Promise<NextInstance> {
   try {
     if (nextInstance) {
       throw new Error(`createNext called without destroying previous instance`)

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<string, string>
+  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<any> }
+  protected dependencies?: PackageJson['dependencies'] = {}
+  protected events: { [eventName: string]: Set<any> } = {}
   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<string, string>
   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<string, string>
-  }) {
-    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,15 +68,15 @@ 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'
     const finalDependencies = {
       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')