`pageProps` should always be defined to ensure everything is working as expected although to prevent a breaking change this adds an additional check before attempting to access `pageProps` before hydration. It also adds tests to prevent regressing on this
Closes: https://github.com/vercel/next.js/issues/15647
This pull request:
1. Relocates tests to correct location
1. Tests more scenarios
1. Fixes a bug with anchors at the start of error message
1. Fixes react key warning error
Fixes#15599
This updates collecting dynamic route params on Vercel to make sure that missing optional dynamic routes are undefined. Additional tests for this mode have also been added to ensure the params are being collected properly
Closes: https://github.com/vercel/next.js/issues/15579
errors in script execution will result in timeout instead of failure. This PR makes sure to pass all arguments to `.then` so error handling is correctly set up. (`.then` needs to be able to take a second argument). I also removed `.finally`.
I don't know why, but it looks like the following test does something that prevents the tests after it from opening a new browser window on azure. I'm giving up, I shuffled the tests to put this one last.
```js
it('shows warning when dynamic route mismatch is used on Link', async () => {
await showsError(
'/dynamic-route-mismatch',
/Mismatching `as` and `href` failed to manually provide the params: post in the `href`'s `query`/,
true,
true
)
})
```
jest retries seem to be masking test failures, like the `auto-export` one (and maybe others). I turned it off for now. The `auto-export` test fails when retries are turned off.
the output of this test failure was a bit unhelpful so I also improved it.
Many tests have anonymous page functions.
- Reduce jest retries to 2 for a total of 3 attempts
- Disable retries in `invalid-href` test. I noticed jest retries don't help when this test fails (see log output of https://github.com/vercel/next.js/runs/904147534).
Fixes https://github.com/vercel/next.js/issues/15188
`parseRelativeUrl` was used on urls that weren't always relative. It was used to generate a cache key, but we actually don't need these cache keys to be relative if the urls aren't relative.
Also took a look at the overall static data fetching logic and found a few things:
- [x] cache key is unnecessarily transformed through `prepareRoute`, we can just cache by resolved `dataHref` and remove that function. Pretty sure that `prepareRoute` was also introducing edge cases with `assetPath` and `delBasePath`
- [x] there is [a bug in the caching logic](ebdfa2e7a3/packages/next/next-server/lib/router/router.ts (L898)) that made it fail on the second visit: it should be `Promise.resolve(this.sdc[pathname])` instead of `Promise.resolve(this.sdc[dataHref])`. Also added a test for this
- [x] ~converted to async await to improve stacktraces and readability.~ I assumed this was fine since I saw some async/awaits in that file already but it seems to just blow up the size of the non-modern bundle.
- [x] extracted nested `getResponse` function and define it top level. this should improve runtime performance
- [x] convert `_getStaticData` and `_getServerData` to class methods instead of properties. Not sure why they were defined as properties but I think they belong on the prototype instead.
- [x] remove `cb` property from `fetchNextData`, it's unnecessary and makes the async flow hard to understand. The exact same logic can go in the `.then` instead.
- [ ] data fetching logic [retries on 5xx errors](ebdfa2e7a3/packages/next/next-server/lib/router/router.ts (L157)), but not on network level errors. It should also retry on those. It should also not retry on every 5xx, probably only makes sense on 502, 503 and 504. (e.g. 500 is a server error that I wouldn't expect to succeed on a retry)
The overall result also is a few bytes smaller in size
- Introduces a lint rule which points towards the unwanted polyfill.io features.
- Aim here is to make the user aware that which of the requested features are actually required vs which are already covered under `next-polyfills`
Next step: If the remaining required polyfills amounts to a only a few KBs then its better to include them in 1P javascript and remove the third party render blocking script tag.
Next.js forcibly setting `module: 'esnext'` in `tsconfig.json` is necessary to prevent TypeScript from erroring on the following code:
```tsx
import dynamic from 'next/dynamic';
const A = dynamic(() => import('../A'));
```
```
ERROR in /Users/joe/Desktop/scratch/test-cjs/pages/index.tsx(5,25):
5:25 Dynamic imports are only supported when the '--module' flag is set to 'es2020', 'esnext', 'commonjs', 'amd', 'system', or 'umd'.
> 5 | const A = dynamic(() => import("../test"));
```
However, users may want to use one of the many other targets for better interoperability with projects that co-exist with their Next.js project (like `commonjs`).
When cross referenced with:
```
Option '--resolveJsonModule' can only be specified when module code generation is 'commonjs', 'amd', 'es2015' or 'esNext'.ts
```
That means we can permit any of these values:
```json5
parsedValues: [
ts.ModuleKind.ES2020,
ts.ModuleKind.ESNext,
ts.ModuleKind.CommonJS,
ts.ModuleKind.AMD,
],
```
This PR updates Next.js to allow those!
---
Fixes#15275
Replace `url.parse` and `url.resolve` logic with whatwg `URL`, Bring in a customized `format` function to handle the node url objects that can be passed to router methods. This eliminates the need for `url` (and thus `native-url`) in core. Looks like it shaves off about 2.5Kb, according to the `size-limits` integration tests.
