## Problem
The project was experiencing npm dependency resolution conflicts when
running `npm install`, caused by incompatible @types/node versions
between Vite 7.1.3 and the existing project dependencies.
Fixes: https://github.com/vercel/next.js/issues/82779
**Error Details:**
- Vite 7.1.3 requires `@types/node@"^20.19.0 || >=22.12.0"`
- Project was using `@types/node@20.10.4`
- This created a peer dependency conflict, preventing clean installs
## Solution
Updated `@types/node` from `20.10.4` to a compatible version that
satisfies Vite 7.x requirements while maintaining compatibility with
Vitest 3.2.4.
## Changes Made
- Updated `@types/node` version in package.json
- Verified compatibility with all existing dependencies
- Confirmed tests still pass with deprecation warnings (React.act import
warnings - separate issue)
## Testing
- [x] `npm install` runs without errors
- [x] `npm test` passes all existing tests
- [x] No breaking changes to existing functionality
## Additional Notes
This fix resolves the immediate dependency conflict. The React.act
deprecation warnings in tests are a separate issue and should be
addressed in a future PR by updating test imports from
`react-dom/test-utils` to `react`.
Details Issue:
1]
npm test
> test
> vitest
The CJS build of Vite's Node API is deprecated. See
https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated
for more details.
DEV v1.0.4
/home/hareesh/learn-frontend/front-open-source/next.js/examples/with-vitest
stderr | app/blog/[slug]/page.test.tsx > App Router: Works with dynamic
route segments
Warning: `ReactDOMTestUtils.act` is deprecated in favor of `React.act`.
Import `act` from `react` instead of `react-dom/test-utils`. See
https://react.dev/warnings/react-dom-test-utils for more info.
stderr | app/page.test.tsx > App Router: Works with Server Components
Warning: `ReactDOMTestUtils.act` is deprecated in favor of `React.act`.
Import `act` from `react` instead of `react-dom/test-utils`. See
https://react.dev/warnings/react-dom-test-utils for more info.
stderr | app/counter.test.tsx > App Router: Works with Client Components
Warning: `ReactDOMTestUtils.act` is deprecated in favor of `React.act`.
Import `act` from `react` instead of `react-dom/test-utils`. See
https://react.dev/warnings/react-dom-test-utils for more info.
stderr | __tests__/Home.test.tsx > Pages Router
Warning: `ReactDOMTestUtils.act` is deprecated in favor of `React.act`.
Import `act` from `react` instead of `react-dom/test-utils`. See
https://react.dev/warnings/react-dom-test-utils for more info.
2]
npm install
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: vite@7.1.3
npm error Found: @types/node@20.10.4
npm error node_modules/@types/node
npm error dev @types/node@"20.10.4" from the root project
npm error peerOptional @types/node@"^18.0.0 || ^20.0.0 || >=22.0.0" from
vitest@3.2.4
npm error node_modules/vitest
npm error dev vitest@"^3.2.4" from the root project
npm error
npm error Could not resolve dependency:
npm error peerOptional @types/node@"^20.19.0 || >=22.12.0" from
vite@7.1.3
npm error node_modules/vite
npm error peer vite@"^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" from
@vitejs/plugin-react@4.7.0
npm error node_modules/@vitejs/plugin-react
npm error dev @vitejs/plugin-react@"^4.2.1" from the root project
npm error vite@"^5.0.0 || ^6.0.0 || ^7.0.0-0" from vitest@3.2.4
npm error node_modules/vitest
npm error dev vitest@"^3.2.4" from the root project
npm error
npm error Conflicting peer dependency: @types/node@24.3.0
npm error node_modules/@types/node
npm error peerOptional @types/node@"^20.19.0 || >=22.12.0" from
vite@7.1.3
npm error node_modules/vite
npm error peer vite@"^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" from
@vitejs/plugin-react@4.7.0
npm error node_modules/@vitejs/plugin-react
npm error dev @vitejs/plugin-react@"^4.2.1" from the root project
npm error vite@"^5.0.0 || ^6.0.0 || ^7.0.0-0" from vitest@3.2.4
npm error node_modules/vitest
npm error dev vitest@"^3.2.4" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency
resolution.
npm error
npm error
npm error For a full report see:
npm error
/home/hareesh/.npm/_logs/2025-08-19T17_17_17_782Z-eresolve-report.txt
npm error A complete log of this run can be found in:
/home/hareesh/.npm/_logs/2025-08-19T17_17_17_782Z-debug-0.log
---------
Co-authored-by: Joseph <sephxd1234@gmail.com>
Co-authored-by: Joseph <joseph.chamochumbi@vercel.com>
## What?
Update examples `.gitignore` files for parity with [Yarn's official
recommendations](https://v3.yarnpkg.com/getting-started/qa#which-files-should-be-gitignored),
accounting for Yarn's modern Plug-n-Play functionality.
## Why?
New projects initialized with `create-next-app` presently add various
extraneous files from the Yarn cache to the initial commit. This is most
notable in the case of the Next SWC binary, which may exceed 100M in
some environments (empirically, 64-bit Darwin and WSL2 Ubuntu, and very
probably other unix/linux environments), and prevent users from pushing
their new projects to free GitHub repositories without rewriting the
commit history to exclude the extraneous files, or unnecessarily setting
up Git LFS to include them.
## How?
I have errored on the side of exclusion to enable users to push their
CNA projects to GitHub as-is and for parity with other package managers,
while still providing the opportunity to opt in to additional
functionality provided by modern Yarn.
These changes follow the recommendations for
**non**-[Zero-Install](https://yarnpkg.com/features/caching#zero-installs)
configurations, as Zero-Install functionality is an extension on top of
the base package manager experience, and may necessitate additional
configuration and present additional complications for unsuspecting
users, so I think it's best left up to the user to opt-in. On account of
the majority of publicly available Next.js-based projects comprising
general consumer-facing websites, it is my belief that the majority of
Next projects would not benefit from Yarn's Zero-Install functionality,
and that explicitly facilitating it by default would break status quo
with all other non-Yarn CNA projects.
Contrary to the example `.gitignore`s provided by Yarn, I've excluded
the `.yarn/sdks` directory as it contains IDE-specific tooling; I feel
it would be presumptuous for an environmentally-agnostic tool to target
and provide package-manager-specific tooling for specific editors. This
too should be left to the user to opt-in to and provide for their
project if they deem necessary.
I have retained the current `.gitignore`'s exclusion of the `/.pnp`
directory for backwards compatibility with older versions of Yarn (the
files therein have since been reallocated to the `.yarn` directory
addressed by these changes, but I am not clear on when that delineation
occurred or the prevalence of Yarn installations which depend on the
former convention). Maintaining the exclusion here, in the worst case,
implies additional downloads (on an order of magnitude merely similar to
using npm from the outset) rather than failure.
CC: @samcx
### Adding or Updating Examples
- [x] The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`.
See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md
Co-authored-by: Sam Ko <sam@vercel.com>
Fixes#68533
A link to docs in `next-dev.d.ts` linked to the pages router docs in app
router templates. This was confusing, because some sections on this page
only work with pages router. This PR fixes that
---------
Co-authored-by: Sam Ko <sam@vercel.com>
## Description
This PR ensures that the default prettier config is used for examples
and templates.
This config is compatible with `prettier@3` as well (upgrading prettier
is bigger change that can be a future PR).
## Changes
- Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will
be needed upgrading to prettier@3)
- Added `examples/.prettierrc.json` with default config (this will
change every example)
- Added `packages/create-next-app/templates/.prettierrc.json` with
default config (this will change every template)
## Related
- Fixes#54402
- Closes#54409
This PR updates the testing guides to use App Router and TypeScript,
also updates `/examples` to show `app` and `pages` examples.
## Overview
- [x] Create a new "Testing" section that is shared between `app` and
`pages`.
- [x] Explain the differences between E2E, unit testing, component
testing, etc.
- [x] Recommend E2E for `async` components as currently none of the
tools support it.
- [x] Update setup guides for **Cypress**, **Playwright**, and **Jest**
with latest config options, and examples for `app` and `pages`.
- [x] Add new guide for **Vitest**
- [x] Clean up `/examples`: use TS, show `app` and `pages` examples,
match docs config
## Cypress
- [x] E2E Tests
- [x] Component Testing
- [x] Client Components
- [x] Server Components
- [ ] `async` components
**Blockers:**
- TS: `Option 'bundler' can only be used when 'module' is set to
'es2015' or later`. In **tsconfig.json** compilerOptions, Next.js uses
"moduleResolution": "bundler", changing it to "node" fixes the issue but
it can have repercussions.
- https://github.com/cypress-io/cypress/issues/27731
- Version 14 is currently not supported for component testing
- https://github.com/cypress-io/cypress/issues/28185
## Playwright
- [x] E2E Tests
## Jest
- [x] Unit Testing
- [x] Client Components
- [x] Server Components
- [ ] `async` components:
https://github.com/testing-library/react-testing-library/issues/1209
- [x] 'server-only': https://github.com/vercel/next.js/pull/54891
- [x] Snapshot Testing
**Blockers:**
- TS: https://github.com/testing-library/jest-dom/issues/546
- None of the solutions in the issue work with Next.js v14.0.4 and TS v5
## Vitest
- [x] Unit Testing
- [x] Client Components
- [x] Server Components
- [ ] `async` components
- [x] 'server-only'
- [x] Update vitest example
- [x] Handles CSS, and CSS modules imports
- [x] Handles next/image
## Other
- https://github.com/vercel/next.js/issues/47448
- https://github.com/vercel/next.js/issues/47299
### Reason for making this change
https://yarnpkg.com/getting-started/qa#:~:text=yarn%2Finstall%2Dstate.,your%20workspaces%20all%20over%20again.
In the official documentation of `yarn`, it is stated that `.yarn/install-state.gz` is an optimization file that developer shouldn't ever have to commit. However, currently, when running `create-next-app`, `.yarn/install-state.gz` is being commited.
### Remaining work
I apologize for only modifying one template initially to initiate the discussion first.
If this change is agreed upon, it should be synchronized with other `.gitignore` templates. Would it be possible to follow a similar approach as in https://github.com/vercel/next.js/pull/47241? I would appreciate any assistance in syncing this change.
They are added to `.gitignore` already. Follow-up on #39051
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a 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 a 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/examples/adding-examples.md)
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Let's open the deploy link in a new window so the link isn't blocked
when running an an iframe, such as Stackblitz.
Previously, this would print the following error:
> Refused to display 'https://vercel.com/' in a frame because it set
'X-Frame-Options' to 'deny'
Documentation / Examples
Make sure the linting passes by running pnpm lint
The examples guidelines are followed from our contributing doc
The Vitest docs state that /// <reference types="vitest" /> is only required when importing defineConfig from vite.
I added ` *.tsbuildinfo` to gitignores of examples that use typescript and don't already have it. By use typescript I mean have `tsconfig` somewhere in their directory tree.
I used the following script to update the files:
```bash
#!/bin/bash
set -eou pipefail
cd examples
examples=`git ls-files . | grep tsconfig | xargs dirname | grep -v "/"`
for example in $examples; do
if ! grep -q tsbuildinfo $example/.gitignore; then
gitignore="$example/.gitignore"
echo $gitignore
tail -c1 $gitignore | read -r _ || echo >> $gitignore
echo -e "\n# typescript\n*.tsbuildinfo" >> $gitignore
fi
done
```
## 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`
Remco Haszing