run middleware parser handler only for middleware modules (#31219)

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have 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 helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`

packages/next/build/webpack/plugins/middleware-plugin.ts

@@ -205,7 +205,12 @@ export default class MiddlewarePlugin {
         })
 
         const handler = (parser: webpack5.javascript.JavascriptParser) => {
+          const isMiddlewareModule = () =>
+            parser.state.module && parser.state.module.layer === 'middleware'
+
           const wrapExpression = (expr: any) => {
+            if (!isMiddlewareModule()) return
+
             if (dev) {
               const dep1 = new wp.dependencies.ConstDependency(
                 '__next_eval__(function() { return ',
@@ -242,10 +247,14 @@ export default class MiddlewarePlugin {
           }
 
           const expressionHandler = () => {
+            if (!isMiddlewareModule()) return
+
             wp.optimize.InnerGraph.onUsage(parser.state, flagModule)
           }
 
           const ignore = () => {
+            if (!isMiddlewareModule()) return
+
             return true
           }
 
@@ -282,12 +291,7 @@ export default class MiddlewarePlugin {
             .tap(PLUGIN_NAME, ignore)
 
           const memberChainHandler = (_expr: any, members: string[]) => {
-            if (
-              !parser.state.module ||
-              parser.state.module.layer !== 'middleware'
-            ) {
-              return
-            }
+            if (!isMiddlewareModule()) return
 
             if (members.length >= 2 && members[0] === 'env') {
               const envName = members[1]

test/integration/middleware/with-eval/lib/utils.js

@@ -6,3 +6,8 @@ export async function usingEval() {
 export async function notUsingEval() {
   return { value: 100 }
 }
+
+export function usingEvalSync() {
+  // eslint-disable-next-line no-eval
+  return { value: eval('100') }
+}

test/integration/middleware/with-eval/pages/index.js

@@ -0,0 +1,15 @@
+import { usingEvalSync, usingEval } from '../lib/utils'
+
+export async function getServerSideProps() {
+  return {
+    props: await usingEval(),
+  }
+}
+
+export default function Page(props) {
+  return (
+    <div>
+      {props.value} and {usingEvalSync().value}
+    </div>
+  )
+}

test/integration/middleware/with-eval/test/index.test.js

@@ -8,6 +8,7 @@ import {
   killApp,
   launchApp,
   nextBuild,
+  renderViaHTTP,
   waitFor,
 } from 'next-test-utils'
 
@@ -45,7 +46,8 @@ describe('Middleware usage of dynamic code evaluation', () => {
       expect(output).toContain(DYNAMIC_CODE_ERROR)
       expect(output).toContain('DynamicCodeEvaluationWarning')
       expect(output).toContain('pages/_middleware')
-      expect(output).toContain('lib/utils.js')
+      // TODO check why that has a backslash on windows
+      expect(output).toMatch(/lib[\\/]utils\.js/)
       expect(output).toContain('usingEval')
       expect(stripAnsi(output)).toContain("value: eval('100')")
     })
@@ -57,6 +59,13 @@ describe('Middleware usage of dynamic code evaluation', () => {
       expect(json.value).toEqual(100)
       expect(output).not.toContain(DYNAMIC_CODE_ERROR)
     })
+
+    it('does not has problems with eval in page or server code', async () => {
+      const html = await renderViaHTTP(context.appPort, `/`)
+      expect(html).toMatch(/>100<!-- --> and <!-- -->100<\//)
+      await waitFor(500)
+      expect(output).not.toContain(DYNAMIC_CODE_ERROR)
+    })
   })
 
   describe('production mode', () => {