This PR adds a new layout mode for images called `raw`, as discussed with the core team a while back. This mode has the following characteristics:
- No wrapper `span` around the `img` element
- No sizer svg
- Almost no styles automatically added to the `img` element
- `style` parameter is allowed and is passed through to the underlying `img` element
This also adds documentation changes to describe the new component.
There are a few tradeoffs and DX decisions that may warrant discussion/revision before merging. I'll add a few comments to highlight those issues.
- Related to #18637
## Summary
This PR adds a new `worker` strategy to the `<Script />` component that automatically relocates and executes the script in a web worker.
```jsx
<Script
strategy="worker"
...
/>
```
[Partytown](https://partytown.builder.io/) is used under the hood to provide this functionality.
## Behavior
- This will land as an experimental feature and will only work behind an opt-in flag in `next.config.js`:
```js
experimental: {
nextScriptWorkers: true
}
```
- This setup use a similar approach to how ESLint and Typescript is used in Next.js by showing an error to the user to install the dependency locally themselves if they've enabled the experimental `nextScriptWorkers` flag.
<img width="1068" alt="Screen Shot 2022-03-03 at 2 33 13 PM" src="https://user-images.githubusercontent.com/12476932/156639227-42af5353-a2a6-4126-936e-269112809651.png">
- For Partytown to work, a number of static files must be served directly from the site (see [docs](https://partytown.builder.io/copy-library-files)). In this PR, these files are automatically copied to a `~partytown` directory in `.next/static` during `next build` and `next dev` if the `nextScriptWorkers` flag is set to true.
## Checklist
- [X] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [X] Related issues linked using `fixes #number`
- [X] Integration tests added
- [X] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
This PR fixes#31517.
This PR removes the `` const documentPage = `_document${globalRuntime ? '-concurrent' : ''}` `` condition from the config resolution phrase, and only use the built-in one. And later when rendering, we can conditionally convert the default class component into a function component. This change is necessary for the switchable runtime feature (#31506).
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] 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`
Fixes#35219
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] 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`
Previously we only run `PagesManifestPlugin` in the Node server runtime, because the Edge target doesn't need it as the web server and middleware SSR loader specially handled pages manifest. This cases entrypoints with the Edge runtime configured being missing from there and this PR fixes it.
Part of #31317 and #31506.
## 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`
* Fix the static streaming render result isn't the resolved streaming rendering content (resolve suspense)
* Update readable stream polyfill to fit the w3c standard
* fix: add try/catch to gracefull handle performance observer exception on older browsers
* fix: run prettier
Co-authored-by: Steven <steven@ceriously.com>
If different contexts (using Jest, using Nx, etc), server.js is getting imported when using middleware and throwing the error: "SyntaxError: Unexpected token 'export'".
fixes#32848
## Bug
- [x] Related issues linked using `fixes #number`
- [ ] 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`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Only happened with SSR without suspense case
Similar reason to #34474, the prefix (script parts) might be flushed during the render stream causing bad HTML. Use the same tricky to delay the prefix flushing
#### Expected
```html
<div>content</div> <!-- render stream -->
<script>...</script> <!-- prefix -->
```
#### Observed
```html
<!-- prefix choked the render stream -->
<div <script>...</script> >content</div>
```
Test sample:
https://next-react-server-components-r5xocii9r-huozhi.vercel.app/ssr
Partially implements #31317 and #31506. There're also some trade-offs made with this PR: since we can't know if a certain runtime will be used or not beforehand, we have to start both runtime compilers (Node.js and Edge) and then generate entrypoints correspondingly.
Note that with this PR, the global runtime is still required to use the per-page runtime.
## 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`
fixes https://github.com/vercel/next.js/issues/34199
Also fixes response code to return `500` when showing error page of preflight request failure on dev mode
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
fixes https://github.com/vercel/next.js/issues/34966
Wait for reading original request body before overwriting the request properties with `originalBody?.finalize()` call since it caused the problem when middleware does not read request body
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
next.js doesn't HMR when installing node_modules.
This fixes it.
## Bug
- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
For streaming, we want the main bundle to be loaded with `async` rather than `defer`. As the first step to doing that, we need an explicit initialization step, rather than occurring as a side effect of being loaded.
For now, I've just split the logic into a `initialization` and `hydrate` (previously `initNext`) functions and called them as a side effect of `next/client/next` and `next/client/next-dev` as before. A follow-up PR will move that to a separate script tag [as recommended](https://github.com/reactwg/react-18/discussions/114).
* feat: support `pnpm` with `create-next-app`
* test: add `--use-pnpm` tests
* docs: mention `--use-pnpm` flag in docs
* test: remove `only`
* Update test/integration/create-next-app/index.test.ts
Co-authored-by: Steven <steven@ceriously.com>
* chore: add pnpm action setup to tests
* chore: use latest pnpm
* chore: debug
* chore: debug
* fix: fall back to `yarn` instead of `npm`
* test: run all tests
Co-authored-by: Steven <steven@ceriously.com>
* Add failing colon rewrite test
* add test fixture
* better colon rewrite tests
* middleware rewrite colon tests with query parameters
* fix#31523
this addresses the symptom but the real systemic issue is that prepareDestination is called on rewrite/redirect URLs, which have no defined special behavior for colons and they should not be compiled at all
* hack around prepareDestination to skip compiling x-middleware-rewrite
this is a bit nicer than just escaping colons, but ideally we find a way to obviate prepareDestination
* obviate prepareDestination for x-middleware-rewrite handling
* don't clobber rewrite query data
* omit redundant type
* catch up to main
* It looks like newUrl should contain only pathname
Co-authored-by: Naoyuki Kanezawa <naoyuki.kanezawa@gmail.com>
We currently use `dotenv-expand@5` in `@next/env`, which does not support default expansion. It was added in v6 (https://github.com/motdotla/dotenv-expand/pull/39).
Upgrading to the latest version of `dotenv-expand` and fixing an import, the added test passed.
Fixes#34718
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] 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`
### Changes
* Remove top-level suspense boundary
* Pipe stream resolved from returned promimse of `renderToReadableStream`
* Remove jsx-runtime alias hack
### Test Changes
Since top level suspense boundary is removed, now content are filled in 1st SSR
Closes#33538.
## Bug
- [x] 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`
This PR introduces a way to use WASM in middlewares.
Next.js will find all `.wasm` imports in middlewares and load them as `WebAssembly.Module` objects, which then can be later instantiated.
The metadata will be stored in `middleware-manifest.json`
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] 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`
Since we are applying this loader to more files, and these two simple RegExp filters will be executed ~70 times per entry, it's an easy optimization to move the RegExp creation outside and merge related testers into the RegExp.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] 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`
This ensures non-matching API routes can be rewritten with i18n configured as currently we bail and render the 404 page when a locale prefixed API route is requested.
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
x-ref: [slack thread](https://vercel.slack.com/archives/CGU8HUTUH/p1643930049224689)
closes: https://github.com/vercel/next.js/issues/28921
This gracefully handles errors when the `url` query string param looks like an internal image because it starts with `/` but it is not pointing to an internal image.
Previously, this was printing an unnecessary stack trace when the upstream content-type was undefined.
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
x-ref: #34021 , #34004
Only log each warning once and only trigger in concurrent mode
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [x] Errors have helpful link attached, see `contributing.md`
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] 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
- [x] Make sure the linting passes by running `yarn lint`
`escape-regex.ts` will always be included in the bundle, so not re-using it actually makes the size larger.
* Update eslint-plugin-react to latest version
There is currently a bug in eslint-plugin-react https://github.com/yannickcr/eslint-plugin-react/issues/3215.
The bug was just fixed in 7.29.1
* update lockfile
Co-authored-by: JJ Kasper <jj@jjsweb.site>
* Add warning for Yarn PnP v3 with Node.js < 16.14
* Apply suggestions from code review
Co-authored-by: Steven <steven@ceriously.com>
* Apply suggestions from code review
Co-authored-by: Steven <steven@ceriously.com>
* lint-fix
Co-authored-by: Steven <steven@ceriously.com>
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
Fixes#34030.
The PR is still WIP as the test case hasn't been added, help or change is welcome.
cc @no-ya @ijjk
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Adds an API config option that disables warning a user when their API response body is over 4 megs. This has been added for users who'd like to stream larger amounts of data from their API acknowledging the drawbacks. This config mirrors the existing [`externalResolver` config](https://nextjs.org/docs/api-routes/api-middlewares#custom-config).
Closes: [#33162](https://github.com/vercel/next.js/issues/33162)
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
This commit adds functionality to track usage of `@next/next/*` ESLint rules and their severity levels.
## 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`
- [x] Integration tests added
- [ ] Documentation added
- [x] 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`
By moving `setRevalidateHeaders` to a separate file we can shake off the dependency of `etag` and a polyfill for `Buffer` from the web server (which brings hundreds of kilobytes).
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] 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`
This PR adds the `X-Powered-By` and `Content-Type` headers to responses sent by the web server. The latter enables compression for the Edge runtime. Still, the web server doesn't have `Content-Length` and `ETag` as the response is usually dynamic.
Part of #31506.
## Bug
- [x] Related issues linked using `fixes #number`
- [ ] 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`
This PR fixes the Fix the create-next-app Multiple calls to the function 'makeDir'.
Currently, no execution errors are generated, but redundant execution exists.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] 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`
`test.css`, `test.scss` etc. will falsely match on a loader that searches for the string `test`
fixes#34583
## Bug
- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [x] 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`
## Bug
If there's upcoming streaming data from server components, should safely skip the bootstrap process. Previously we deleted the buffer then it will cause the buffer is missing in the later re-renders. Now we mark it as empty array, so it can safely skip the boostrap phase
x-ref: #34475
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [x] Errors have helpful link attached, see `contributing.md`
This removes the config for the `commons` chunk.
I think the idea was that modules are that in all pages are put into a `commons` chunk, but that breaks when next/dynamic comes into play, which also creates chunks. So the `totalPages` condition is broken and could lead to too many modules placed into the commons chunk.
Example: 2 pages, each has one next/dynamic. Both on demand chunks include module A. page 1 includes module B and next/dynamic on page 2 includes module B. A and B are placed into commons. commonjs chunk is loaded in page 1 and both next/dynamic. Page 1 would load module A even while it doesn't need it.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] 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`
* Move type to image component
* Add types/global.d.ts to excludes too
* Undo global exclude as it's using internally
* Don't add root imports for module augmentations
## Bug
Fixes#34527
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [x] Errors have helpful link attached, see `contributing.md`
Currently, we print warnings during `next dev` for every render of `next/image`, which can quickly fill the console making it really unfriendly to developers trying to read the logs.
This PR changes the behavior so that each unique warning prints at most once.
- Related to #33007
- Related to #31340
* ignore all .env files in default template
* ignore all .env files in typescript template
* ignore all local .env files in default template
Co-authored-by: Balázs Orbán <info@balazsorban.com>
* ignore all local .env files in typescript template
Co-authored-by: Balázs Orbán <info@balazsorban.com>
Report full parsed runtime errors over error bus, accepts preventDisplay prop to avoid showing error messages inline, while still reporting errors over the bus.
Basically, we want to handle the parsed error/stack differently in Next Live, showing a modal that sits above the content and allows users to report the issue to us. We want to have that stack trace in the issue report, so I added a new event `unhandled-error-full`.
The `preventDisplay` prop then just lets us output our own modal instead of showing the error inline, but still renders the `<RuntimeErrors />` component so it can fetch the stack and report it over the bus.
This isn't *beautiful* code per-se, but I think doing it really right would require a pretty intense re-structure of this module. I think ideally we'd have export a function to fetch of the stack that we can just expose separately - that fetch currently happens in a sub-sub-component (DevOverlay > Errors > RuntimeError). But that re-write is pretty high effort, would still require much of what we do here anyway, and would just to get a slightly less awkward API in a not very high-use area. So leaving it as-is for now, happy to revisit though if we want.
## Feature
- [x] Related issues linked using `fixes #number`
Fixes an issue with Next Live #290.
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
This PR brings back @Schniz awesome contribution to bring in bodies to middleware. It was reverted to leave it out of the stable release and to have some time to test it out in canary before officially releasing it. This PR is simply a `cherry-pick` of his original work.
Closes: #30953
Closes: https://github.com/vercel/next.js/pull/34490
Co-authored-by: Gal Schlezinger <2054772+Schniz@users.noreply.github.com>
## Bug
Fixes: #31993
* Remove the simple component checking in middleware ssr
* Leverage existing components checking for Component / App / Document, if any of these component is not valid react type or is undefined nextjs will error in dev mode with redbox. Like above.
<img width="826" alt="image" src="https://user-images.githubusercontent.com/4800338/154668945-bcee24ee-17aa-4afd-acda-9f8b249891ac.png">
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [x] Errors have helpful link attached, see `contributing.md`
