Currently, when a user forgets the `src` prop on an image, an error is thrown. However that error doesn't include any of the the user's code in the stack trace, so its nearly impossible to figure out which image is the culprit if there are multiple images on the page.
Since this error only throws on demand when a page is visited during `next dev`, we can instead delay the error so it no longer prints on the server but prints on mount instead. At that point, we'll have the `<img>` element via ref and can print it to the web console with the stack trace.
- Fixes#23742
Fixes#38742
## 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 `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
I noticed our internal comments about exported functions that should not be used in application code.
TSDoc has the [`@internal`](https://tsdoc.org/pages/tags/internal/) option that can be used together with TS's [`stripInternal: true` compiler option](https://www.typescriptlang.org/tsconfig/#stripInternal), hiding these from inferred types:
Before:
![image](https://user-images.githubusercontent.com/18369201/180011847-5d754629-e2f6-4fef-ab18-916174ef006d.png)
After:
![image](https://user-images.githubusercontent.com/18369201/180011951-ee8b1a9d-f0a7-4603-9532-d0e6b08f5ac8.png)
It would also be great to use `/**/` comments instead of `//` when documenting methods/properties/functions, as these can be picked up by the editor when referring to these, so someone new to the codebase will hopefully have to jump around less to get some useful comments.
## 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 `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
Starting in Node.js 18, the `fetch` global was made available and that caused the squoosh implementation to assume it was on a web browser and try to fetch the wasm file instead of reading it from the filesystem. This PR deletes the code trying to fetch since we know that squoosh only runs in the Image Optimization API, not the browser.
- Fixes#38020
- Enables a test that was disabled in #38460
## How to reproduce
1. create a next.js app with a middleware (or an edge route) that imports a node.js module:
```js
// middleware.js
import { NextResponse } from 'next/server'
import { basename } from 'path'
export default async function middleware() {
basename()
return NextResponse.next()
}
```
2. deploy it to vercel with `vc`
3. go to the your function logs in Vercel Front (https://vercel.com/$user/$project/$deployment/functions)
4. in another tab, query your application
> it results in a 500 page:
<img width="517" alt="image" src="https://user-images.githubusercontent.com/186268/179557102-72568ca9-bcfd-49e2-9b9c-c51c3064f2d7.png">
> in the logs you should see:
<img width="1220" alt="image" src="https://user-images.githubusercontent.com/186268/179557266-498f3290-b7df-46ac-8816-7bb396821245.png">
## Expected behavior
The route should fail indeed in a 500, because Edge runtime **does not support node.js modules**. However the error in logs should be completely different:
```shell
error - Error: The edge runtime does not support Node.js 'path' module.
Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime
```
## Notes to reviewers
I introduced this issue in #38234.
Prior to the PR above, the app would not even build, as we were checking imported node.js module during the build with AST analysis.
Since #38234, the app would build and should fail at runtime, with an appropriate error.
The mistake was to declare `__import_unsupported` function in the sandbox's context, that is only used in `next dev` and `next start`, but not shipped to Vercel platform.
By loading it inside webpack loaders (both middleware and edge route), we ensure it will be defined on Vercel as well.
The existing test suite (`pnpm testheadless --testPathPattern=runtime-module-error`) covers them.
Fixes#38533 by including `src/` as a default linting directory where all files within are linted
## Bug
- [X] Related issues linked using `fixes #number`
- [X] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
- Drop support for Fauna example with cookie auth
- Fixup GraphQL endpoints in Fauna example
## Testing
Deployed the example to my own Vercel account to ensure I was able to standup the sample guestbook. Confirmed that entries reached my database for various region groups.
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
* [edge] allow importing blob assets
* Fix test
* extract to a new file, to make it easier to read and review
* Use webpack asset discovery and transform with a loader
* fix tests
* don't prefix assets
* use emitFile
* rename assets to blobs to be more specific
* rename blobs to assets and use webpack's hashing algo
* Dedupe correctly
* Add a Node.js dep test
* Update packages/next/server/next-server.ts
Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com>
* [code review] test remote URL fetches
* [code review] use `import type` for type-only imports
* Update packages/next/server/next-server.ts
Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com>
* Apply suggestions from code review
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Ensures the `<html>` is not wrapped in an extra div when the root layout is nested in a route group.
## 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 `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
## Bug
Minor fix to wasm binding to correctlly coerece async interface to return promise, even though it calls sync interface internally.
- [ ] 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 `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
Fixes#38613
Given `navigator.serviceWorker` [has ~96% support in browsers](https://caniuse.com/?search=navigator.serviceWorker), also removed the check for `"serviceWorker" in navigator`.
## 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 `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
* Updating the with-emotion-swc example to use TypeScript
* Updating dependencies
* Adding @types packages for react and react-dom
* Adding @types/node
Fixes#38749
Since we are calling it `API_URL`, it sounds more correct to require including the `/graphql` rather than making `WORDPRESS_API_URL` be just the root domain in 54f87245dc/examples/cms-wordpress/README.md (L96)
## 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 `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
## Bug
x-ref: #38691
* Previous configured loader.issue results into a single function and will bail during next build, tune the rule set conditions to make it work for both pages and app dir
* prefer to use `mod.resourceResolveData?.path` instead of `mod.userRequest` since userRquest contains the applied loaders info
- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
### Changes
#### Add missing virtual client entry matcher for css modules
client entry module has no file path, add the missing file matcher for client css modules loader
#### Use relative paths for imports in client entry to avoid module resolving failure.
if it's `next/head` or other 3rd party installed path, just import it instead of the resolved file path
This updates the `with-sentry` example to use the new helper function `captureUnderscoreErrorException` in its `_error.js` page. This new function both adds more data to sentry events and allows the code to be cleaned up quite a bit.
Fixes https://github.com/vercel/next.js/issues/37870.
- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Add [bundlejs](https://bundlejs.com/) site - an online tool to quickly bundle & minify your projects, while viewing the compressed gzip/brotli bundle size, all running locally on your browser.
The lowercase name is intentional.
Follow-up to #38682. Instead of checking if the full element is in the viewport we only check if the top of the element is in the viewport. If it is not we have to scroll back up in cases of navigating between items in the same layout for example.
* test: added some test cases for new client side router
* tests: added additional test cases
* test: improved test support
* feat: added support for `<Link soft />`
* tests: improved test reliability
* tests: added more cases for catch-all routes
* tests: added app -> pages -> app tests
* tests: add tests for useCookies + useHeaders
* tests: added tests for usePreviewData
* tests: added more tests for hooks and client components
* tests: added tests for query/params handling
* tests: fix tests for param/query to use props
* tests: added some skipped tests for unimplemented features
* tests: linting
* refactor: updated TODO -> TODO-APP
* tests: added some more test cases
* tests: skipped failing test