Commit Graph

516 Commits

Author SHA1 Message Date
Donny/강동윤 d55699d5f7 feat(turbopack): Enable lightningcss for turbopack by default (#62565)
# Turbopack

* https://github.com/vercel/turbo/pull/7682 <!-- Will Binns-Smith -
Turbopack HMR: url-encode sourceURLs -->
* https://github.com/vercel/turbo/pull/7524 <!-- Donny/강동윤 -
feat(turbopack): Enable lightningcss for turbopack by default -->


### What?

Enable lightningcss by default, for `--turbo` mode.

### Why?

It's time to do it 😄 

### How?

Turbopack counterpart: https://github.com/vercel/turbo/pull/7524


Closes PACK-2600
2024-03-11 06:49:43 +00:00
Jiachi Liu 27ed7820a8 [error overlay] move missing tags error inside error overlay (#62993)
### What

* Move missing html tags error into error overlay, from outside we don't
have to manually determine when to render a dummy component with runtime
missing tag error or error overlay.
* Add brackets `<>` to the html tags in the error



![image](https://github.com/vercel/next.js/assets/4800338/cd3467b7-74c2-477e-8516-c31761adb064)


### Why

In #62815, we're having throwing an missing required error, this will
trigger another runtime error. Then when error overlay caught it through
error event listener, it will render it as an unhandled runtime error:

You will see the below message in the overlay.
```
Unhandled Runtime Error
Error: The following tas are missing...

[Error stack]
```

This error message will bring a message that the error is happened on
client during runtime, but actually we already know that is a user side
mistake which doesn't have a error trace. This couldn't hmr as you fix
the error as well.

This PR moves the rendering into error overlay that we're aware of the
errors and can render the correct html on client, with the `html` tag
attached with error id and `body` wrapping the error overlay. We tell
overlay that there're missing tags through props, let it handle
everything inside.

It can also hmr once you fix the error. One drawback is that when you
re-introduce the error, it might trigger react DOM updates exception
(`Failed to execute 'removeChild' on 'Node': The node to be removed is
not a child of this node.`) instead of the "missing tags" message again.
Besides that the HMR works properly.

Closes NEXT-2741
2024-03-07 14:24:00 +01:00
Donny/강동윤 3ed96f92cb feat: Introduce lightningcss-loader for webpack users (#61327)
### What?

I'm recreating a PR because CI of
https://github.com/vercel/next.js/pull/58712 uses `lightningcss@1.14.0`
for an unknown reason.

Add an opt-in feature to use `lightningcss` instead of webpack
css-loader.

### Why?

In the name of performance.

### How?


This PR is largely based on https://github.com/fz6m/lightningcss-loader
by @fz6m.
(Thank you for nice work)

Closes PACK-1998
Closes PACK-2124

---------

Co-authored-by: OJ Kwon <1210596+kwonoj@users.noreply.github.com>
2024-03-06 17:07:53 +01:00
Balázs Orbán 8f5107de16 feat(error-overlay): notify about missing html/body in root layout (#62815) 2024-03-06 10:59:53 +00:00
Leah 9f72146dd7 fix(turbopack): don't emit issues for deleted pages (#62012)
### What?

We now keep track of all client assets emitted for each route in
`ClientAssetMapper` and remove all issues associated with them when a
route get deleted.

Fixes #61384  
Closes PACK-2487
2024-02-29 16:55:49 +00:00
Jiachi Liu e5d604f33b Upgrade vendored react (#62326)
### React upstream changes

- https://github.com/facebook/react/pull/28333
- https://github.com/facebook/react/pull/28334
- https://github.com/facebook/react/pull/28378
- https://github.com/facebook/react/pull/28377
- https://github.com/facebook/react/pull/28376
- https://github.com/facebook/react/pull/28338
- https://github.com/facebook/react/pull/28331
- https://github.com/facebook/react/pull/28336
- https://github.com/facebook/react/pull/28320
- https://github.com/facebook/react/pull/28317
- https://github.com/facebook/react/pull/28375
- https://github.com/facebook/react/pull/28367
- https://github.com/facebook/react/pull/28380
- https://github.com/facebook/react/pull/28368
- https://github.com/facebook/react/pull/28343
- https://github.com/facebook/react/pull/28355
- https://github.com/facebook/react/pull/28374
- https://github.com/facebook/react/pull/28362
- https://github.com/facebook/react/pull/28344
- https://github.com/facebook/react/pull/28339
- https://github.com/facebook/react/pull/28353
- https://github.com/facebook/react/pull/28346
- https://github.com/facebook/react/pull/25790
- https://github.com/facebook/react/pull/28352
- https://github.com/facebook/react/pull/28326
- https://github.com/facebook/react/pull/27688
- https://github.com/facebook/react/pull/28329
- https://github.com/facebook/react/pull/28332
- https://github.com/facebook/react/pull/28340
- https://github.com/facebook/react/pull/28327
- https://github.com/facebook/react/pull/28325
- https://github.com/facebook/react/pull/28324
- https://github.com/facebook/react/pull/28309
- https://github.com/facebook/react/pull/28310
- https://github.com/facebook/react/pull/28307
- https://github.com/facebook/react/pull/28306
- https://github.com/facebook/react/pull/28315
- https://github.com/facebook/react/pull/28318
- https://github.com/facebook/react/pull/28226
- https://github.com/facebook/react/pull/28308
- https://github.com/facebook/react/pull/27563
- https://github.com/facebook/react/pull/28297
- https://github.com/facebook/react/pull/28286
- https://github.com/facebook/react/pull/28284
- https://github.com/facebook/react/pull/28275
- https://github.com/facebook/react/pull/28145
- https://github.com/facebook/react/pull/28301
- https://github.com/facebook/react/pull/28224
- https://github.com/facebook/react/pull/28152
- https://github.com/facebook/react/pull/28296
- https://github.com/facebook/react/pull/28294
- https://github.com/facebook/react/pull/28279
- https://github.com/facebook/react/pull/28273
- https://github.com/facebook/react/pull/28269
- https://github.com/facebook/react/pull/28376
- https://github.com/facebook/react/pull/28338
- https://github.com/facebook/react/pull/28331
- https://github.com/facebook/react/pull/28336
- https://github.com/facebook/react/pull/28320
- https://github.com/facebook/react/pull/28317
- https://github.com/facebook/react/pull/28375
- https://github.com/facebook/react/pull/28367
- https://github.com/facebook/react/pull/28380
- https://github.com/facebook/react/pull/28368
- https://github.com/facebook/react/pull/28343
- https://github.com/facebook/react/pull/28355
- https://github.com/facebook/react/pull/28374
- https://github.com/facebook/react/pull/28362
- https://github.com/facebook/react/pull/28344
- https://github.com/facebook/react/pull/28339
- https://github.com/facebook/react/pull/28353
- https://github.com/facebook/react/pull/28346
- https://github.com/facebook/react/pull/25790
- https://github.com/facebook/react/pull/28352
- https://github.com/facebook/react/pull/28326
- https://github.com/facebook/react/pull/27688
- https://github.com/facebook/react/pull/28329
- https://github.com/facebook/react/pull/28332
- https://github.com/facebook/react/pull/28340
- https://github.com/facebook/react/pull/28327
- https://github.com/facebook/react/pull/28325
- https://github.com/facebook/react/pull/28324
- https://github.com/facebook/react/pull/28309
- https://github.com/facebook/react/pull/28310
- https://github.com/facebook/react/pull/28307
- https://github.com/facebook/react/pull/28306
- https://github.com/facebook/react/pull/28315
- https://github.com/facebook/react/pull/28318
- https://github.com/facebook/react/pull/28226
- https://github.com/facebook/react/pull/28308
- https://github.com/facebook/react/pull/27563
- https://github.com/facebook/react/pull/28297
- https://github.com/facebook/react/pull/28286
- https://github.com/facebook/react/pull/28284
- https://github.com/facebook/react/pull/28275
- https://github.com/facebook/react/pull/28145
- https://github.com/facebook/react/pull/28301
- https://github.com/facebook/react/pull/28224
- https://github.com/facebook/react/pull/28152
- https://github.com/facebook/react/pull/28296
- https://github.com/facebook/react/pull/28294
- https://github.com/facebook/react/pull/28279
- https://github.com/facebook/react/pull/28273
- https://github.com/facebook/react/pull/28269

Closes NEXT-2542


Disable ppr test for strict mode for now, @acdlite will check it and
we'll sync again
2024-02-23 12:46:58 +01:00
Jiachi Liu 8d28d5954e test: rename node_modules_bak to node_modules (#62066)
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
2024-02-15 00:42:35 +01:00
Jiachi Liu 18322d2d77 test: add test for logging trace of dynamic = error (#61811)
Add test that we can log the error trace when we found invalid dynamic
usage when `dynamic = "error"`


![image](https://github.com/vercel/next.js/assets/4800338/e6710019-ab94-42e8-81b2-6362f828cf35)


Closes NEXT-2402
Closes NEXT-2383
2024-02-08 16:53:43 +01:00
Tim Neutkens e169e73b45 Add hasRedbox fix (#60522)
## What?

As @leerob and I found in-person when opening #57230 the `hasRedBox()`
helper was incorrectly passing when it shouldn't pass in both the true
and false case.

This PR uses a different approach by waiting 7 seconds before checking,
this leaves enough room for HMR / reloads to apply, it doesn't
meaningfully slow down the test suite and increases reliability of the
check as you can see below in the tests that were previously passing
that are no longer passing.

I've moved these to skipped tests for landing this PR as I want to avoid
further issues being introduced while we fix them. @huozhi will
investigate these next week 👍

Failing tests that are temporarily skipped:
-
https://github.com/vercel/next.js/pull/60522/files#diff-513b477050bf1a620697b4d16bc1e6850282cb54e0609bdc5fd34307bfa9e471R9
-
https://github.com/vercel/next.js/pull/60522/files#diff-fa7d7c8c40914005c138d852eaf6a69ac0df51ec77bec548cbc5f0bfbdc8ebc5R25
-
https://github.com/vercel/next.js/pull/60522/files#diff-6f9f7dc131416cb17938311939a56d8c0e685a8fe6e8fc0cf5cd04939c74f388R41
-
https://github.com/vercel/next.js/pull/60522/files#diff-439830e340a320c56645e9d00aaf0fd0b492ddb90b6d7f9db89458ccc5158eb7R8
-
https://github.com/vercel/next.js/pull/60522/files#diff-62938bf5cd4d84f96dde8b6bcb2c8e18099e6dfca269c4302229b79175c0250cR18
-
https://github.com/vercel/next.js/pull/60522/files#diff-513b477050bf1a620697b4d16bc1e6850282cb54e0609bdc5fd34307bfa9e471R9


<!-- 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-2059
2024-01-15 09:36:44 +01:00
Lee Robinson fb73c3a9d2 Add reproduction for HMR moving / renaming files. (#57230)
Pairing with @timneutkens. Passes with webpack, fails with Turbopack.

```
TURBOPACK=1 pn testonly-dev test/development/app-dir/hmr-move-file
```

---------

Co-authored-by: Leah <8845940+ForsakenHarmony@users.noreply.github.com>
Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com>
2024-01-09 19:02:00 +01:00
Donny/강동윤 94771bf3cc refactor: Add lightningcss mode for turbopack-css (#58471)
### What?

We are experimenting with `lightningcss`. This is about replacing
`swc_css` with `lightningcss` in turbopack, and the main reason for this
is to reduce the maintenance burden.
But when I tried, it introduced several regressions, so I'm putting it
behind an experimental flag.

You can enable `lightningcss` mode for **turbopack** by adding a flag to
the next config file.

```js
/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  experimental: {
    useLightningcss: true,
  },
}

module.exports = nextConfig

```

Note that this is only for turbopack because we were not using `swc_css`
for non-turbopack mode of next.js



x-ref:
https://vercel.slack.com/archives/C03EWR7LGEN/p1700025496732229?thread_ts=1700019629.866549&cid=C03EWR7LGEN


### Why?

We should avoid regressions.

### How?

---

turbopack PR: https://github.com/vercel/turbo/pull/6456


Closes PACK-1966

---------

Co-authored-by: Leah <github.leah@hrmny.sh>
2023-11-20 18:09:36 +01:00
Jiachi Liu a63b89b140 Loose types of app routes return value (#55849)
### What

#51394 introduced a pretty strict type of return value of route type
that causing failure with `next build`.
There're few ways of writing a app route, it could contain few return
values based on the usage:

* return a `Response` or promise of it
* return `NextResponse` of promise of it, since it's extended from
`Response`, same type
* use `redirect()` or `notFound(), since it returns `never`, and the
below code is not reached, the handler itself could still return void.
e.g. using `redirect` in a `GET` route

We loosed the type so `redirect()` can be still allowed without
specifying the return value there.
Related typescript issue:
https://github.com/microsoft/TypeScript/issues/16608#issuecomment-309327984

### How
* Re-enable the bail on types / build error in the app-routes tests
* Separate the tests, move runtime erroring ones to
`test/e2e/app-dir/app-routes-errors`
* Add new case to app-routes tests of mixed return value

Closes #55623 
Related #55604
2023-09-25 11:34:21 +02:00
Leah e191ae3a02 add test for turbopack refresh error (#55447)
Closes WEB-1584
2023-09-15 17:09:59 +00:00
Balázs Orbán 96a59344e8 fix(app): enable React Strict Mode by default (#53375)
### What?

Let Next.js enable React Strict Mode by default for the App Router.

This caught a bug with the `AppRouterAnnouncer` added in #47018 which
should be fixed as well.

### Why?

This logic:


https://github.com/vercel/next.js/blob/a0d1d728b9003f12c9df6c5e9a33bc4c33cef0ab/packages/next/src/build/webpack-config.ts#L326-L333

assumes that the default value of `reactStrictMode` is `null`, but it
was set to `false` in #46656.

### How?

This PR reverts the default value to `null`.


Closes NEXT-1484
Fixes #53315

---------

Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
2023-08-22 20:17:17 +02:00
Tim Neutkens 25a9547cad Remove experimental config from create-next-app (#49241)
## What?

Removes `experimental.appDir` this was leftover from when I flipped the
switch.

Kept the config file as in the future we might add future flags and
such. It also helps that it has the types comment included so you always
get types.

<!-- 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 or adding/fixing 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 #

-->

---------

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2023-05-05 00:22:28 -07:00
Tim Neutkens 1865a6e3d9 Don't build pages before middleware (#48339)
### What?

The team working on vercel.com reported that multiple pages were being
compiled when opening a single page. Investigated this a bit and found
it was caused by the matching logic (that also triggers compiling of
matched pages) running before middleware runs.

### How?

Removed this matcher logic, as far as I can tell it's not actually being
used. Probably a leftover from when we provided `page` as a middleware
parameter before we made middleware run in front of all resolving.

Fixes NEXT-999
Fixes NEXT-806

<!-- 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 or adding/fixing 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 #

-->
2023-04-18 12:28:49 +02:00