fix(next): use moduleGraph.getIssuer to avoid deprecation warning (#36329)

packages/next/server/dev/hot-reloader.ts

@@ -106,12 +106,16 @@ const matchNextPageBundleRequest = route(
 )
 
 // Recursively look up the issuer till it ends up at the root
-function findEntryModule(issuer: any): any {
-  if (issuer.issuer) {
-    return findEntryModule(issuer.issuer)
+function findEntryModule(
+  compilation: webpack5.Compilation,
+  issuerModule: any
+): any {
+  const issuer = compilation.moduleGraph.getIssuer(issuerModule)
+  if (issuer) {
+    return findEntryModule(compilation, issuer)
   }
 
-  return issuer
+  return issuerModule
 }
 
 function erroredPages(compilation: webpack5.Compilation) {
@@ -121,7 +125,7 @@ function erroredPages(compilation: webpack5.Compilation) {
       continue
     }
 
-    const entryModule = findEntryModule(error.module)
+    const entryModule = findEntryModule(compilation, error.module)
     const { name } = entryModule
     if (!name) {
       continue

test/development/webpack-issuer-deprecation-warning/index.test.ts

@@ -0,0 +1,29 @@
+import { createNext } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { renderViaHTTP } from 'next-test-utils'
+
+describe('webpack-issuer-deprecation-warning', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        'pages/index.js': `
+          export default function Page() { 
+            return <p>hello world
+          } 
+        `,
+      },
+      dependencies: {},
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('should not appear deprecation warning about webpack module issuer', async () => {
+    const html = await renderViaHTTP(next.url, '/')
+    expect(html).toContain('Syntax Error')
+    expect(next.cliOutput).not.toContain(
+      '[DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API'
+    )
+  })
+})

test/lib/next-modes/next-dev.ts

@@ -40,6 +40,8 @@ export class NextDevInstance extends NextInstance {
         },
       })
 
+      this._cliOutput = ''
+
       this.childProcess.stdout.on('data', (chunk) => {
         const msg = chunk.toString()
         process.stdout.write(chunk)