### What?
* add support for esmExternals in pages
* fix default of esmExternals to true
* fix serverComponentExternalPackages support
* add test case
fixes PACK-2311
fixes PACK-1916
Fixes https://github.com/vercel/turbo/issues/4544
<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:
## For Contributors
### Improving Documentation
- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide
### Adding or Updating Examples
- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md
### Fixing a bug
- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md
### Adding a feature
- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md
## For Maintainers
- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change
-->
### What?
Updating Example for Storyblok
### Why?
While setting up the Storyblok example to do create quick poc I noticed
some documentation missing and some code not working as expected.
### How?
- Updates documentation about Storyblok example in README
- Code change in HeroPost to make Storyblok example work as expected
Updated paths in relation to `<Link />` and middleware rewrites. Feel
free to leave suggestions if needed, this has always confused me a
little bit.
**Old Version**:
For example, if you have a Dynamic Route like `/dashboard/[user]` that
you want to present differently via middleware, you would write: `<Link
href={{ pathname: '/dashboard/authed/[user]', query: { user: username }
}} as="/dashboard/[user]">Profile</Link>`.
The `as` prop should be the URL we want to display while href/pathname
is the actual path. So if we want to present something differently via
middleware, we would do so via `as`. In the example above we want to
display `/dashboard/[user]` differently but we use
`as='/dashboard/[user]'`.
Previous implementation of `sendGAEvent` was pushing arguments to
`dataLayer` via rest parameter syntax, resulting in an actual array,
which GA doesn't seem to process correctly (resulting in the event not
showing up in GA reports). This PR refactors it to a vanilla JS function
passing data via the `arguments` array-like object, which is able to be
processed correctly and results in the event showing up as expected.
fixes [61703](https://github.com/vercel/next.js/issues/61703)
Co-authored-by: JJ Kasper <jj@jjsweb.site>
### What?
Closes PACK-2469
Trying to add some description to the one of the public interface.
---------
Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com>
### What?
Fix one assertion about CSS files emitted by turbopack.
### Why?
Webpack generates 3 links with `?v=` query, and 2 extra links without
`?v=` query. Turbopack does not have query string, so we match 5 links.
### How?
Closes PACK-2414
It’s not possible to combine `export =` type definitions with ESM-style
exports. To export types for a module that uses `module.exports =`, one
needs to use a namespace.
Also `Options` is now imported from `@mdx-js/loader`. The imports need
to come from a direct dependency or peer dependency. Also
`@mdx-js/loader` is more accurate here, because the options are passed
into `@mdx-js/loader`.
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
### What
* Narrow down the metadata base warnings only when there's any relative
urls need to be resolved, if there's only absolute urls present, no need
to resolve and we don't warn.
* Polish the error message, updated from "metadata.metadataBase is not
set ..." to "metadataBase property in metadata export is not set ..."
### Why
It will be confusing if we're still show metadataBase warning when
there's no need to set one, since the social image cards only have
absolute urls
Closes NEXT-2426
This fills the last piece in the puzzle and it's based on #61001. In
#61001 we covered the case of nested Server Action definition in a non
"use server" file. And this PR extends that to a "use server" file so
exported values are automatically handled just like before, but any
other definitions including nested ones will be hoisted and marked
correctly now.
```ts
'use server'
let a, f
export async function action0(b, c, ...g) { // <- Handled like before.
return async function action1(d) { // <- Renamed, marked and hoisted.
'use server'
let f
console.log(...window, { window })
console.log(a, b, action2)
async function action2(e) { // <- Renamed, marked and hoisted.
'use server'
console.log(a, c, d, e, f, g)
}
return [
action2,
async function action3(e) { // <- Renamed, marked and hoisted.
'use server'
action2(e)
console.log(a, c, d, e)
},
]
}
}
```
Closes NEXT-2491
### What
We should respect the `trailingSlash` config for metadata canonical url,
this PR is adding the handling for strip or keep the trailing slash for
canonical url. Passing down trailingSlash config to metadata resolving
to decide how we handle it.
### Why
The tricky one was `/` pathname, when visiting the origin directly, that
it will always have at least `/` in the URL instance. But for the
default `origin`, it shouldn't show the `/` if the `trailingSlash`
config is `false`. Also it should show trailing slash for all pathnames
if that config is enabled.
BTW there's a `__NEXT_TRAILING_SLASH` env but since we're using the
fixed nextjs runtime module, so this can't be dynamically replaced in
the metadata resolving modules. So we didn't use it
Fixes#54070
Closes NEXT-2424
### What
Following an anchor link to a hash param, and then attempting to use
`history.pushState` or `history.replaceState`, would result in an MPA
navigation to the targeted URL.
### Why
In #61822, a guard was added to prevent calling `ACTION_RESTORE` with a
missing tree, to match other call-sites where we do the same. This was
to prevent the app from crashing in the case where app router internals
weren't available in the history state. The original assumption was that
this is a rare / unlikely edge case. However the above scenario is a
very probable case where this can happen, and triggering an MPA
navigation isn't ideal.
### How
This updates `ACTION_RESTORE` to be resilient to an undefined router
state tree. When this happens, we'll still trigger the restore action to
sync params, but use the existing flight router state.
Closes NEXT-2502
## What?
Noticed this file was being `require`ed but doesn't actually hold
anything relevant as the flag it adds was removed already.
Also found that in the next-core crate there were files that are no
longer needed as it uses Next.js directly now. That fixes a bug when
running with `NextMode::Build` as well, as it couldn't resolve some of
these unused files.
<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:
## For Contributors
### Improving Documentation
- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide
### Adding or Updating Examples
- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md
### Fixing a bug
- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md
### Adding a feature
- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md
## For Maintainers
- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change
### What?
### Why?
### How?
Closes NEXT-
Fixes #
-->
Closes NEXT-2500
We switched to `pnpm` for testing instead of `yarn` for e2e tests
containing customized node_modules packages, it works with
`node_modules` folder before. Rename the existing `node_modules_bak`
hack to make it easy to test with.
Previously we use `yarn` but it will clean `node_modules` folder so we
have to use another script to copy packages, it's not a required thing
now so we can test package from node_modules directly without renaming
folders locally
Closes NEXT-2496
This ensures we don't normalize the `distDir` in the webpack config in
dev mode as it won't be moved to the right location like it is during
build.
Fixes: https://github.com/vercel/next.js/issues/61105
Closes NEXT-2495
### What
Disable swc transform optimizer for node_modules in browser layer of app
router bundles
Fixes#61858Fixes#60644Fixes#60920Fixes#61740
Closes NEXT-2418
### Why
In browser there could be not only one runtime, it could have both js
worker and browser. In js worker the `typeof window` is not as same as
in browser, so disabling the swc optimizer which will replace the code.
Leave the condition as it as.
### Why?
I really dislike the way `.chain` works right now, it shouldn't mutate
the `BrowserInterface`, this PR changes it so it's just a pure chain
without weird side effects.
One example with the current version (before this PR):
```
const el = browser.elementByCss('#version-2')
await el.text()
// throws
await el.text()
```
### Additional Changes
- removes selenium (which is completely unused)
- updates playwright
- makes the playwright tracing not error all the time
### What?
Probably not the right solution, next.js disables the `react-server`
import condition in there somehow I think
### Why?
Resend uses `@react-email/render` which uses `renderToString` from
`react-dom/server`.
Unfortunately importing `react-dom/server` with the `react-server`
import condition leads to a broken bundle (which seems like a bug in
react?).
Closes PACK-2243
Fixes#57936
### What
When a global not found page is rendered, and when the not-found page or
containing layout has a link with `prefetch: auto` back to the root
page, the router would update the URL but not correctly swap out the
not-found component with the page component.
### Why
With auto prefetching (which is the default when `prefetch` is left
unspecified on a link), the router will perform a partial prefetch on
dynamic pages. This means it'll fetch the flight data _without_ React
nodes and store it in the prefetch cache. On navigation, this is used to
determine where we already have cached React nodes and where we need to
trigger a lazy fetch to get new data. However, global not found pages
are peculiar in that they will always contain a data path like: `['', {
children: ['__PAGE__', {}] }]` since they are inserted at the root. This
means that if there's also a page component that corresponds with the
same path, the router will incorrectly think it already has cache node
data for it.
### How
During SSR when the `asNotFound` flag signals to the renderer that the
component we're rendering is matching the global not-found page, we
modify the segment key to be something unique so the data path won't
collide with a top-level page.
In
[fc01c8e](fc01c8e7f7)
I added handling only on the server to modify the segment key. This
still fixes the issue, but at the cost of triggering an MPA navigation
on the client because it's treated as a root layout change
In
[69d5687](69d5687765)
I added client handling to not treat this special segment key as a root
layout change, and to signal to the router it needs to refetch the data.
This ensures we don't do an MPA navigation.
Fixes#61956
Closes NEXT-2481
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
### What?
Turbopack uses `parse_as_prorgram`, and in case of empty file it returns
script instead of module so none of visitor runs for the rsc module.
This PR attempts to workaround, however need double clarification if
upstream swc behavior is desired.
Closes PACK-2460
### What?
This PR improves turbopack documentation, mostly collects existing
documents into a single place.
Also, adds a support to render mermaid diagram.
Closes PACK-2488
Moved app-dir path params parsing logic from `useParams` to `AppRouter`.
This allows for the use of `PathParamsContext` in the `useParams` hook
for both pages and app routers. In addition, this allows for memoization
of the layout tree which fixes undesired re-renders of the `useParams`
hook.
Fixes [#58788](https://github.com/vercel/next.js/issues/58788)
Closes NEXT-2434
---------
Co-authored-by: Zack Tanner <zacktanner@gmail.com>