rsnext/errors/page-without-valid-component.md
Ben Ilegbodu 41ecd5e6e2
docs: Add link to pageExtensions config in page-without-valid-component.md (#34285)
The [Page Without Valid React Component](https://nextjs.org/docs/messages/page-without-valid-component) explains some ways to fix the problem of Next finding a non-React Component. However, if someone is trying to use `.mdx` as an extension, or wants to include tests, stories or other non-page files in their `pages` folder there's nothing for them.

The [Custom Page Extensions](https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions) has all the info to help them out, but adding it to this error page should make it more discoverable.



## 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`
2022-02-14 17:25:45 +00:00

1.1 KiB

Page Without Valid React Component

Why This Error Occurred

A page that does not export a valid React Component was found while analyzing the build output.

This is a hard error because the page would error when rendered, and causes poor build performance.

Possible Ways to Fix It

Investigate the list of page(s) specified in the error message. For each, you'll want to check if the file is meant to be a page.

If the file is not meant to be a page, and instead, is a shared component or file, move the file to a different folder like components or lib.

If the file is meant to be a page, double check you have an export default with the React Component instead of an export. If you're already using export default, make sure the returned value is a valid React Component.

If you need to support a different file extension for a page component (such as .mdx) or would like to include non-page files in the pages directory, configure Custom Page Extensions in the next.config.js.