Fix code splitting and build target for the server-web build (#30972)

- Code splitting should be disabled for the server-web build. Done via `ServerlessPlugin`.
- ~Target can't be `web`, `webworker` is better.~ Using `web` and `es6` for now, still not ideal.
- acornjs/acorn#970

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] 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-config.ts

@@ -1450,7 +1450,8 @@ export default async function getBaseWebpackConfig(
           resourceRegExp: /react-is/,
           contextRegExp: /next[\\/]dist[\\/]/,
         }),
-      isServerless && isServer && !webServerRuntime && new ServerlessPlugin(),
+      ((isServerless && isServer) || webServerRuntime) &&
+        new ServerlessPlugin(),
       isServer &&
         !webServerRuntime &&
         new PagesManifestPlugin({ serverless: isLikeServerless, dev }),

packages/next/build/webpack/config/blocks/base.ts

@@ -14,7 +14,11 @@ export const base = curry(function base(
     : 'client'
 
   // @ts-ignore TODO webpack 5 typings
-  config.target = !ctx.targetWeb ? 'node12.22' : ['web', 'es5']
+  config.target = !ctx.targetWeb
+    ? 'node12.22'
+    : ctx.webServerRuntime
+    ? ['web', 'es6']
+    : ['web', 'es5']
 
   // https://webpack.js.org/configuration/devtool/#development
   if (ctx.isDevelopment) {

packages/next/build/webpack/loaders/next-flight-client-loader.ts

@@ -81,7 +81,7 @@ async function parseExportNamesInto(
   loadModule: TransformSourceFunction
 ): Promise<void> {
   const { body } = acorn.parse(transformedSource, {
-    ecmaVersion: 2019,
+    ecmaVersion: 11,
     sourceType: 'module',
   }) as any
   for (let i = 0; i < body.length; i++) {

packages/next/build/webpack/loaders/next-flight-server-loader.ts

@@ -28,7 +28,7 @@ async function parseImportsInfo(
   pageExtensions: string[]
 ): Promise<string> {
   const { body } = acorn.parse(source, {
-    ecmaVersion: 2019,
+    ecmaVersion: 11,
     sourceType: 'module',
   }) as any
 

packages/next/build/webpack/loaders/next-middleware-ssr-loader/index.ts

@@ -51,7 +51,7 @@ export default async function middlewareRSCLoader(this: any) {
 
         const buildManifest = self.__BUILD_MANIFEST
         const reactLoadableManifest = self.__REACT_LOADABLE_MANIFEST
-        const rscManifest = self._middleware_rsc_manifest
+        const rscManifest = self.__RSC_MANIFEST
 
         if (typeof Page !== 'function') {
           throw new Error('Your page must export a \`default\` component')

packages/next/build/webpack/plugins/flight-manifest-plugin.ts

@@ -120,9 +120,7 @@ export class FlightManifestPlugin {
       })
     })
 
-    const output =
-      `self._middleware_rsc_manifest=(typeof _ENTRIES === "undefined"?{}:_ENTRIES)._middleware_rsc_manifest=` +
-      JSON.stringify(json)
+    const output = `self.__RSC_MANIFEST=` + JSON.stringify(json)
     assets[`server/${MIDDLEWARE_FLIGHT_MANIFEST}.js`] = new sources.RawSource(
       output
     )

packages/next/server/web/sandbox/sandbox.ts

@@ -130,13 +130,10 @@ export async function run(params: {
   const entryPoint = cache.context._ENTRIES[`middleware_${params.name}`]
 
   if (params.ssr) {
-    const rscManifest = cache.context._ENTRIES._middleware_rsc_manifest
     cache = undefined
-
-    if (rscManifest && entryPoint) {
+    if (entryPoint) {
       return entryPoint.default({
         request: params.request,
-        rscManifest,
       })
     }
   }

test/integration/react-streaming-and-server-components/app/pages/dynamic-imports.js

@@ -0,0 +1,13 @@
+import { lazy, Suspense } from 'react'
+
+const Foo = lazy(() => import('../components/foo.client'))
+
+export default function Page() {
+  return (
+    <div>
+      <Suspense fallback="loading...">
+        <Foo />
+      </Suspense>
+    </div>
+  )
+}

test/integration/react-streaming-and-server-components/test/index.test.js

@@ -3,6 +3,7 @@
 import cheerio from 'cheerio'
 import { join } from 'path'
 import fs from 'fs-extra'
+import webdriver from 'next-webdriver'
 
 import {
   File,
@@ -140,6 +141,12 @@ describe('concurrentFeatures - prod', () => {
       expect(content.clientInfo).toContainEqual(item)
     }
   })
+
+  it('should support React.lazy and dynamic imports', async () => {
+    const html = await renderViaHTTP(context.appPort, '/dynamic-imports')
+    expect(html).toContain('foo.client')
+  })
+
   runBasicTests(context)
 })
 
@@ -153,6 +160,16 @@ describe('concurrentFeatures - dev', () => {
   afterAll(async () => {
     await killApp(context.server)
   })
+
+  it('should support React.lazy and dynamic imports', async () => {
+    const html = await renderViaHTTP(context.appPort, '/dynamic-imports')
+    expect(html).toContain('loading...')
+
+    const browser = await webdriver(context.appPort, '/dynamic-imports')
+    const content = await browser.eval(`window.document.body.innerText`)
+    expect(content).toMatchInlineSnapshot('"foo.client"')
+  })
+
   runBasicTests(context)
 })