Prebundle react for appDir #41337

huozhi · 2022-10-11T17:36:06Z

Inline a react and react-dom for app dir, when appDir flag is enabled opt into the built-in version for all.

For server layer react, use the react share subset for server components.
For all server side of react-dom usage, use the server-rendering-stub.

ijjk · 2022-10-12T12:09:53Z

Failing test suites

Commit: 19a6e5d

pnpm testheadless test/e2e/app-dir/app-static.test.ts

app-dir static/dynamic handling > should handle dynamicParams: false correctly
app-dir static/dynamic handling > should handle dynamicParams: true correctly
app-dir static/dynamic handling > should navigate to static path correctly
app-dir static/dynamic handling > should ssr dynamically when detected automatically with fetch cache option
app-dir static/dynamic handling > should ssr dynamically when forced via config

Expand output

● app-dir static/dynamic handling › should handle dynamicParams: false correctly

expect(received).toBe(expected) // Object.is equality

Expected: 404
Received: 500

  162 |         { redirect: 'manual' }
  163 |       )
> 164 |       expect(invalidRes.status).toBe(404)
      |                                 ^
  165 |       expect(await invalidRes.text()).toContain('page could not be found')
  166 |     }
  167 |   })

  at Object.<anonymous> (e2e/app-dir/app-static.test.ts:164:33)

● app-dir static/dynamic handling › should handle dynamicParams: true correctly

expect(received).toBe(expected) // Object.is equality

Expected: 200
Received: 500

  222 |         }
  223 |       )
> 224 |       expect(res.status).toBe(200)
      |                          ^
  225 |       const html = await res.text()
  226 |       const $ = cheerio.load(html)
  227 |

  at Object.<anonymous> (e2e/app-dir/app-static.test.ts:224:26)

● app-dir static/dynamic handling › should navigate to static path correctly

expect(received).toContain(expected) // indexOf

Expected substring: "/blog/[author]"
Received string:    "<head></head><body><pre style=\"word-wrap: break-word; white-space: pre-wrap;\">Internal Server Error</pre></body>"

  235 |     await browser.eval('window.beforeNav = 1')
  236 |
> 237 |     expect(await browser.eval('document.documentElement.innerHTML')).toContain(
      |                                                                      ^
  238 |       '/blog/[author]'
  239 |     )
  240 |     await browser.elementByCss('#author-2').click()

  at Object.<anonymous> (e2e/app-dir/app-static.test.ts:237:70)

● app-dir static/dynamic handling › should ssr dynamically when detected automatically with fetch cache option

expect(received).toBe(expected) // Object.is equality

Expected: "/ssr-auto/cache-no-store"
Received: ""

  276 |     const initial$ = cheerio.load(initialHtml)
  277 |
> 278 |     expect(initial$('#page').text()).toBe(pathname)
      |                                      ^
  279 |     const initialDate = initial$('#date').text()
  280 |
  281 |     expect(initialHtml).toContain('Example Domain')

  at Object.<anonymous> (e2e/app-dir/app-static.test.ts:278:38)

● app-dir static/dynamic handling › should ssr dynamically when forced via config

expect(received).toBe(expected) // Object.is equality

Expected: "/ssr-forced"
Received: ""

  336 |     const initial$ = cheerio.load(initialHtml)
  337 |
> 338 |     expect(initial$('#page').text()).toBe('/ssr-forced')
      |                                      ^
  339 |     const initialDate = initial$('#date').text()
  340 |
  341 |     const secondRes = await fetchViaHTTP(next.url, '/ssr-forced', undefined, {

  at Object.<anonymous> (e2e/app-dir/app-static.test.ts:338:38)

Read more about building and testing Next.js in contributing.md.

pnpm testheadless test/e2e/app-dir/back-button-download-bug.test.ts

app-dir back button download bug > should redirect route when clicking link

Expand output

● app-dir back button download bug › should redirect route when clicking link

page.waitForSelector: Timeout 30000ms exceeded.
=========================== logs ===========================
waiting for selector "#post-page"
============================================================

  329 |     return this.chain(() => {
  330 |       return page
> 331 |         .waitForSelector(selector, { timeout, state: 'attached' })
      |          ^
  332 |         .then(async (el) => {
  333 |           // it seems selenium waits longer and tests rely on this behavior
  334 |           // so we wait for the load event fire before returning

  at lib/browsers/playwright.ts:331:10
  at Object.<anonymous> (e2e/app-dir/back-button-download-bug.test.ts:34:18)

Read more about building and testing Next.js in contributing.md.

pnpm testheadless test/e2e/app-dir/prefetching.test.ts

app dir prefetching > should show layout eagerly when prefetched with loading one level down
app dir prefetching > should not have prefetch error for static path

Expand output

● app dir prefetching › should show layout eagerly when prefetched with loading one level down

next build failed with code/signal 1

  75 |         if (code || signal)
  76 |           reject(
> 77 |             new Error(`next build failed with code/signal ${code || signal}`)
     |             ^
  78 |           )
  79 |         else resolve()
  80 |       })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:77:13)

● app dir prefetching › should not have prefetch error for static path

next build failed with code/signal 1

  75 |         if (code || signal)
  76 |           reject(
> 77 |             new Error(`next build failed with code/signal ${code || signal}`)
     |             ^
  78 |           )
  79 |         else resolve()
  80 |       })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:77:13)

Read more about building and testing Next.js in contributing.md.

pnpm testheadless test/e2e/app-dir/rendering.test.ts

app dir rendering > ISR > should revalidate the page when revalidate is configured
app dir rendering > SSR only > should run data in layout and page
app dir rendering > SSR only > should run data in parallel
app dir rendering > static only > should run data in layout and page
app dir rendering > static only > should run data in parallel during development

Expand output

● app dir rendering › SSR only › should run data in layout and page

expect(received).toBe(expected) // Object.is equality

Expected: "hello from layout"
Received: ""

  39 |       const html = await renderViaHTTP(next.url, '/ssr-only/nested')
  40 |       const $ = cheerio.load(html)
> 41 |       expect($('#layout-message').text()).toBe('hello from layout')
     |                                           ^
  42 |       expect($('#page-message').text()).toBe('hello from page')
  43 |     })
  44 |

  at Object.<anonymous> (e2e/app-dir/rendering.test.ts:41:43)

● app dir rendering › SSR only › should run data in parallel

expect(received).toBe(expected) // Object.is equality

Expected: "hello from slow layout"
Received: ""

  52 |       // expect(duration < 7000).toBe(true)
  53 |       const $ = cheerio.load(html)
> 54 |       expect($('#slow-layout-message').text()).toBe('hello from slow layout')
     |                                                ^
  55 |       expect($('#slow-page-message').text()).toBe('hello from slow page')
  56 |     })
  57 |   })

  at Object.<anonymous> (e2e/app-dir/rendering.test.ts:54:48)

● app dir rendering › static only › should run data in layout and page

expect(received).toBe(expected) // Object.is equality

Expected: "hello from layout"
Received: ""

  61 |       const html = await renderViaHTTP(next.url, '/static-only/nested')
  62 |       const $ = cheerio.load(html)
> 63 |       expect($('#layout-message').text()).toBe('hello from layout')
     |                                           ^
  64 |       expect($('#page-message').text()).toBe('hello from page')
  65 |     })
  66 |

  at Object.<anonymous> (e2e/app-dir/rendering.test.ts:63:43)

● app dir rendering › static only › should run data in parallel during development

expect(received).toBe(expected) // Object.is equality

Expected: "hello from slow layout"
Received: ""

  78 |       // expect(duration < 7000).toBe(true)
  79 |       const $ = cheerio.load(html)
> 80 |       expect($('#slow-layout-message').text()).toBe('hello from slow layout')
     |                                                ^
  81 |       expect($('#slow-page-message').text()).toBe('hello from slow page')
  82 |     })
  83 |   })

  at Object.<anonymous> (e2e/app-dir/rendering.test.ts:80:48)

● app dir rendering › ISR › should revalidate the page when revalidate is configured

expect(received).toBe(expected) // Object.is equality

Expected: "hello from layout"
Received: ""

   95 |       }
   96 |       const { $ } = await getPage()
>  97 |       expect($('#layout-message').text()).toBe('hello from layout')
      |                                           ^
   98 |       expect($('#page-message').text()).toBe('hello from page')
   99 |
  100 |       const layoutNow = $('#layout-now').text()

  at Object.<anonymous> (e2e/app-dir/rendering.test.ts:97:43)

Read more about building and testing Next.js in contributing.md.

Since we have already bundled dependencies for server layer, so the shared deps chunk group is not needed anymore. Also changing to esm assets import with next internals for edge function and middleware build. The changes are originally from #41337, try to land them separately.

# Conflicts: # packages/next/export/worker.ts

ijjk

Nice!

reverting #41337 Co-authored-by: JJ Kasper <jj@jjsweb.site>

reverting vercel#41337 Co-authored-by: JJ Kasper <jj@jjsweb.site>

Since we have already bundled dependencies for server layer, so the shared deps chunk group is not needed anymore. Also changing to esm assets import with next internals for edge function and middleware build. The changes are originally from vercel#41337, try to land them separately.

Inline a react and react-dom for app dir, when `appDir` flag is enabled opt into the built-in version for all. For server layer react, use the react share subset for server components. For all server side of react-dom usage, use the server-rendering-stub. Co-authored-by: Shu Ding <g@shud.in> Co-authored-by: JJ Kasper <jj@jjsweb.site>

huozhi added 6 commits October 10, 2022 19:29

Pre copy react

acc9a25

alias react in all dirs

0962b64

change webpack aliascondition

1178a1a

add require hook

2fd5ea1

update precompiled

8e14bf1

fix compiled

99eea31

ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Oct 11, 2022

fix bundling and aliasing

a50d7f8

shuding force-pushed the app-prebundle-react branch from 91ce27c to a50d7f8 Compare October 11, 2022 18:14

huozhi added 4 commits October 11, 2022 21:25

Merge branch 'canary' into app-prebundle-react

cea0cdf

Fix typing and jsx-runtime alias

7f65e0a

fix lint

addcaa8

Merge branch 'canary' into app-prebundle-react

6a6faf4

huozhi added 4 commits October 12, 2022 14:13

update precompile

a2ee8b2

conditional require hooks

9ca203e

fix loadRequireHook call

44eeb65

apply override

3670d1d

huozhi mentioned this pull request Oct 14, 2022

Remove edge shared deps #41413

Merged

huozhi added 9 commits October 14, 2022 06:12

Merge branch 'canary' into app-prebundle-react

fd5bf3c

hard code import path for app-render

d9bbc08

fix test for oneOf

3ca7ff6

use env for require hook and alias react-dom

8431c9c

Update react

0e5ddcc

Merge branch 'canary' into app-prebundle-react

dd92451

simplify react overriding and update flight

ba6338a

fix lock file

79afa9f

update compiled pkgs

0628a32

huozhi and others added 16 commits October 16, 2022 17:23

fix pre-compiled and resolving

cf1f39c

fix externals for rsc renderer and stick react-server conditon

65f9259

revert changes

0f898b8

remove extra overriding

939f90d

external react-dom for servr renderer

e93630f

fix dev mode and edge react resolution

db18aa5

merge conditions

d304670

use react stub

de79698

Merge branch 'canary' into app-prebundle-react

e2c5ff8

revert test page

50a7755

alias subset, use stub fork for server

fc6e0f0

Merge branch 'canary' into app-prebundle-react

da2f176

# Conflicts: # packages/next/export/worker.ts

update compiled

19a6e5d

dont ncc react

5cbb0f5

copy react react-dom assets

4802456

update test and fix lint

9dca3b9

huozhi marked this pull request as ready for review October 18, 2022 22:49

huozhi requested review from timneutkens, ijjk, shuding and padmaia as code owners October 18, 2022 22:49

ijjk approved these changes Oct 18, 2022

View reviewed changes

ijjk merged commit bc335d7 into vercel:canary Oct 18, 2022

huozhi deleted the app-prebundle-react branch October 18, 2022 23:45

huozhi mentioned this pull request Oct 22, 2022

Disable using prebundled of react for appDir #41635

Merged

ijjk added a commit that referenced this pull request Oct 22, 2022

Disable using prebundled of react for appDir (#41635)

3a87e81

reverting #41337 Co-authored-by: JJ Kasper <jj@jjsweb.site>

shuding pushed a commit to shuding/next.js that referenced this pull request Oct 23, 2022

Disable using prebundled of react for appDir (vercel#41635)

658bd8c

reverting vercel#41337 Co-authored-by: JJ Kasper <jj@jjsweb.site>

github-actions bot locked as resolved and limited conversation to collaborators Nov 18, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Prebundle react for appDir #41337

Prebundle react for appDir #41337

huozhi commented Oct 11, 2022 •

edited

ijjk commented Oct 12, 2022 •

edited

ijjk left a comment

Prebundle react for appDir #41337

Prebundle react for appDir #41337

Conversation

huozhi commented Oct 11, 2022 • edited

ijjk commented Oct 12, 2022 • edited

Failing test suites

ijjk left a comment

Choose a reason for hiding this comment

huozhi commented Oct 11, 2022 •

edited

ijjk commented Oct 12, 2022 •

edited