Fix instrumentation with only pages (#62622)

This ensures we properly transpile `instrumentation.ts` when only
`pages` is being used as previously we were relying on the `app`
specific loaders which aren't configured when an `app` directory isn't
present. We regressed on this in
#60984 as it was working as
expected prior to this commit

x-ref: [slack
thread](https://vercel.slack.com/archives/C011GK1JUBA/p1709075846401649?thread_ts=1706643408.233909&cid=C011GK1JUBA)

Closes NEXT-2632

packages/next/src/build/webpack-config.ts

@@ -500,6 +500,15 @@ export default async function getBaseWebpackConfig(
       ].filter(Boolean)
     : []
 
+  const instrumentLayerLoaders = [
+    // When using Babel, we will have to add the SWC loader
+    // as an additional pass to handle RSC correctly.
+    // This will cause some performance overhead but
+    // acceptable as Babel will not be recommended.
+    swcServerLayerLoader,
+    babelLoader,
+  ].filter(Boolean)
+
   const middlewareLayerLoaders = [
     // When using Babel, we will have to use SWC to do the optimization
     // for middleware to tree shake the unused default optimized imports like "next/server".
@@ -1478,7 +1487,7 @@ export default async function getBaseWebpackConfig(
             {
               test: codeCondition.test,
               issuerLayer: WEBPACK_LAYERS.instrument,
-              use: appServerLayerLoaders,
+              use: instrumentLayerLoaders,
             },
             ...(hasAppDir
               ? [

test/e2e/multi-zone/app/package.json

@@ -2,11 +2,6 @@
   "name": "with-zones",
   "version": "1.0.0",
   "private": true,
-  "scripts": {
-    "dev": "node server.js",
-    "build": "yarn next build apps/host && yarn next build apps/guest",
-    "start": "NODE_ENV=production node server.js"
-  },
   "dependencies": {
     "@types/react": "18.0.28",
     "next": "canary",

test/e2e/multi-zone/multi-zone.test.ts

@@ -11,9 +11,13 @@ createNextDescribe(
     startCommand: (global as any).isNextDev ? 'pnpm dev' : 'pnpm start',
     packageJson: {
       scripts: {
+        dev: 'node server.js',
+        build: 'yarn next build apps/host && yarn next build apps/guest',
+        start: 'NODE_ENV=production node server.js',
         'post-build': 'echo done',
       },
     },
+    dependencies: require('./app/package.json').dependencies,
   },
   ({ next, isNextDev }) => {
     it.each([

test/e2e/opentelemetry/app/app/[param]/rsc-fetch/edge/page.tsx

@@ -8,6 +8,6 @@ export async function generateMetadata() {
 }
 
 export default async function Page() {
-  const data = await fetch('https://vercel.com')
+  const data = await fetch('https://example.vercel.sh')
   return <pre>RESONSE: {data.status}</pre>
 }

test/e2e/opentelemetry/app/app/[param]/rsc-fetch/page.tsx

@@ -6,6 +6,11 @@ export async function generateMetadata() {
 }
 
 export default async function Page() {
-  const data = await fetch('https://vercel.com')
-  return <pre>{await data.text()}</pre>
+  const data = await fetch('https://example.vercel.sh')
+  return (
+    <>
+      <p>Page</p>
+      <pre>{await data.text()}</pre>
+    </>
+  )
 }

test/e2e/opentelemetry/instrumentation-minimal.ts

@@ -0,0 +1,3 @@
+export async function register() {
+  console.log('instrumentation log')
+}

test/e2e/opentelemetry/instrumentation-pages-app-only.test.ts

@@ -0,0 +1,67 @@
+import { nextTestSetup } from 'e2e-utils'
+import { retry } from 'next-test-utils'
+
+for (const { app, src, pathname, text } of [
+  {
+    pages: true,
+    src: false,
+    pathname: '/pages/param/getServerSideProps',
+    text: 'Page',
+  },
+  {
+    pages: true,
+    src: true,
+    pathname: '/pages/param/getServerSideProps',
+    text: 'Page',
+  },
+  {
+    app: true,
+    src: false,
+    pathname: '/app/param/rsc-fetch',
+    text: 'Page',
+  },
+  {
+    app: true,
+    src: true,
+    pathname: '/app/param/rsc-fetch',
+    text: 'Page',
+  },
+]) {
+  describe(`instrumentation ${app ? 'app' : 'pages'}${
+    src ? ' src/' : ''
+  }`, () => {
+    const curDir = app ? 'app' : 'pages'
+    const oppositeDir = app ? 'pages' : 'app'
+
+    const { next } = nextTestSetup({
+      files: __dirname,
+      env: {
+        NEXT_PUBLIC_SIMPLE_INSTRUMENT: '1',
+      },
+      skipDeployment: true,
+      packageJson: {
+        scripts: {
+          'setup-dir': `mv instrumentation-minimal.ts instrumentation.ts; rm -rf ${oppositeDir}${
+            src
+              ? `; mkdir src; mv ${curDir} src/; mv instrumentation.ts src/`
+              : ''
+          }`,
+          dev: 'pnpm setup-dir && next dev',
+          build: 'pnpm setup-dir && next build',
+          start: 'next start',
+        },
+      },
+      startCommand: `pnpm ${(global as any).isNextDev ? 'dev' : 'start'}`,
+      buildCommand: `pnpm build`,
+      dependencies: require('./package.json').dependencies,
+    })
+
+    it('should start and serve correctly', async () => {
+      const html = await next.render(pathname)
+      expect(html).toContain(text)
+      retry(() => {
+        expect(next.cliOutput).toContain('instrumentation log')
+      })
+    })
+  })
+}

test/e2e/opentelemetry/instrumentation.ts

@@ -1,6 +1,6 @@
-import { register as registerForTest } from './instrumentation-test'
-
 export async function register() {
+  const { register: registerForTest } = await import('./instrumentation-test')
+
   if (process.env.__NEXT_TEST_MODE) {
     registerForTest()
   } else if (process.env.NEXT_RUNTIME === 'nodejs') {

test/e2e/opentelemetry/opentelemetry.test.ts

@@ -129,12 +129,13 @@ createNextDescribe(
                         ],
                       },
                       {
-                        name: 'fetch GET https://vercel.com/',
+                        name: 'fetch GET https://example.vercel.sh/',
                         attributes: {
                           'http.method': 'GET',
-                          'http.url': 'https://vercel.com/',
-                          'net.peer.name': 'vercel.com',
-                          'next.span_name': 'fetch GET https://vercel.com/',
+                          'http.url': 'https://example.vercel.sh/',
+                          'net.peer.name': 'example.vercel.sh',
+                          'next.span_name':
+                            'fetch GET https://example.vercel.sh/',
                           'next.span_type': 'AppRender.fetch',
                         },
                         kind: 2,
@@ -265,14 +266,15 @@ createNextDescribe(
                         ],
                       },
                       {
-                        name: 'fetch GET https://vercel.com/',
+                        name: 'fetch GET https://example.vercel.sh/',
                         kind: 2,
                         attributes: {
-                          'next.span_name': 'fetch GET https://vercel.com/',
+                          'next.span_name':
+                            'fetch GET https://example.vercel.sh/',
                           'next.span_type': 'AppRender.fetch',
-                          'http.url': 'https://vercel.com/',
+                          'http.url': 'https://example.vercel.sh/',
                           'http.method': 'GET',
-                          'net.peer.name': 'vercel.com',
+                          'net.peer.name': 'example.vercel.sh',
                         },
                         status: { code: 0 },
                       },

test/lib/next-modes/base.ts

@@ -73,6 +73,8 @@ export class NextInstance {
     this.env = {}
     Object.assign(this, opts)
 
+    require('console').log('packageJson??', this.packageJson)
+
     if (!(global as any).isNextDeploy) {
       this.env = {
         ...this.env,
@@ -102,7 +104,17 @@ export class NextInstance {
         )
       }
 
-      await fs.cp(files.fsPath, this.testDir, { recursive: true })
+      await fs.cp(files.fsPath, this.testDir, {
+        recursive: true,
+        filter(source) {
+          // we don't copy a package.json as it's manually written
+          // via the createNextInstall process
+          if (path.relative(files.fsPath, source) === 'package.json') {
+            return false
+          }
+          return true
+        },
+      })
     } else {
       for (const filename of Object.keys(files)) {
         const item = files[filename]