Next.js Discord

Discord Forum

Running into an unexpected error after upgrading to canary version and enabling ppr & reactCompiler

Answered
! hxrjxt posted this in #help-forum
Open in Discord
Avatar
! hxrjxtOP
I just upgraded from v14.2.5 to ^15.0.0-canary.190 and I am getting the following error after running bun run dev or bun run build:

$ next dev
  ▲ Next.js 15.0.0-canary.190
  - Local:        http://localhost:3000
  - Environments: .env
  - Experiments (use with caution):
    · ppr
    · reactCompiler
 ○ Compiling / ...
 ⨯ app\page.tsx
Invariant: Expected to replace all template variables, missing VAR_ORIGINAL_PATHNAME in template
 ⨯ app\not-found.tsx
Invariant: Expected to replace all template variables, missing VAR_ORIGINAL_PATHNAME in template
 ⨯ app\not-found.tsx
Invariant: Expected to replace all template variables, missing VAR_ORIGINAL_PATHNAME in template
 GET / 500 in 4009ms

I enabled the following experimental options in my next.config.mjs file:
const nextConfig = {
  experimental: {
    ppr: true,
    reactCompiler: true,
  },
};

export default nextConfig;

I tried doing the following:

1. Disabled ppr, enabled reactCompiler, here are the logs:
  - Experiments (use with caution):
    · reactCompiler
 ⨯ app\not-found.tsx
Invariant: Expected to replace all template variables, missing VAR_ORIGINAL_PATHNAME in template
 ⨯ app\not-found.tsx
Invariant: Expected to replace all template variables, missing VAR_ORIGINAL_PATHNAME in template
 GET /_next/static/webpack/15cc75b3d896c036.webpack.hot-update.json 500 in 4198ms

2. Disabled reactCompiler, enabled ppr, here are the logs:
  - Experiments (use with caution):
    · ppr
 ○ Compiling /_not-found ...
 ⨯ app\not-found.tsx
Invariant: Expected to replace all template variables, missing VAR_ORIGINAL_PATHNAME in template
 ⨯ app\not-found.tsx
Invariant: Expected to replace all template variables, missing VAR_ORIGINAL_PATHNAME in template
 ⨯ app\not-found.tsx
Invariant: Expected to replace all template variables, missing VAR_ORIGINAL_PATHNAME in template
 GET /_next/static/webpack/15cc75b3d896c036.webpack.hot-update.json 500 in 7748ms
 ⚠ Fast Refresh had to perform a full reload due to a runtime error.
 GET / 500 in 608ms
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: ENOENT: no such file or directory, rename 'path\frontend\.next\cache\webpack\client-development-fallback\0.pack.gz_' -> 'path\frontend\.next\cache\webpack\client-development-fallback\0.pack.gz'
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: ENOENT: no such file or directory, rename 'path\frontend\.next\cache\webpack\client-development-fallback\0.pack.gz_' -> 'path\frontend\.next\cache\webpack\client-development-fallback\0.pack.gz'

3. Disabled both ppr and reactCompiler, here are the logs:
  ▲ Next.js 15.0.0-canary.190
  - Local:        http://localhost:3000
  - Environments: .env

 ○ Compiling / ...
 ⨯ app\not-found.tsx
Invariant: Expected to replace all template variables, missing VAR_ORIGINAL_PATHNAME in template
 ⨯ app\not-found.tsx
Invariant: Expected to replace all template variables, missing VAR_ORIGINAL_PATHNAME in template
 ⨯ app\not-found.tsx
Invariant: Expected to replace all template variables, missing VAR_ORIGINAL_PATHNAME in template
 GET /_next/static/webpack/60ab7931340c6088.webpack.hot-update.json 500 in 7529ms
 ⚠ Fast Refresh had to perform a full reload due to a runtime error.
 GET / 500 in 316ms
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: ENOENT: no such file or directory, rename 'path\frontend\.next\cache\webpack\client-development-fallback\0.pack.gz_' -> 'path\frontend\.next\cache\webpack\client-development-fallback\0.pack.gz'


/app/not-found.tsx file:
import { redirect } from 'next/navigation';

export default function NotFound() {
  return redirect('/');
}

I tried changing the /app/not-found.tsx file to the following, but the error still persisted.
export default function NotFound() {
  return <div>Not found...</div>;
}
Answered by ! hxrjxt
Fixed it by deleting the .next directory and running bun dev...
View full answer

3 Replies

Avatar
! hxrjxtOP
Just deleted the node_modules directory and ran bun install, the error now:

 ⨯ ./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2F_not-found%2Fpage&page=%2F_not-found%2Fpage&appPaths=&pagePath=private-next-app-dir%2Fnot-found.tsx&appDir=D%3A%5CNotario%20Network%5CSignVault%5Cfrontend%5Capp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=D%3A%5CNotario%20Network%5CSignVault%5Cfrontend&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!
Error: Cannot find module 'D:\Notario Network\SignVault\frontend\node_modules\next\dist\build\webpack\loaders\next-app-loader.js'
Require stack:
- D:\Notario Network\SignVault\frontend\node_modules\next\dist\compiled\loader-runner\LoaderRunner.js
- D:\Notario Network\SignVault\frontend\node_modules\next\dist\compiled\webpack\bundle5.js
- D:\Notario Network\SignVault\frontend\node_modules\next\dist\compiled\webpack\webpack.js
- D:\Notario Network\SignVault\frontend\node_modules\next\dist\server\config-utils.js
- D:\Notario Network\SignVault\frontend\node_modules\next\dist\server\config.js
- D:\Notario Network\SignVault\frontend\node_modules\next\dist\server\next.js
- D:\Notario Network\SignVault\frontend\node_modules\next\dist\server\lib\start-server.js
 GET /_next/static/webpack/58124e6059e93c8d.webpack.hot-update.json 500 in 6955ms
 ⚠ Fast Refresh had to perform a full reload due to a runtime error.
 GET / 500 in 151ms
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: ENOENT: no such file or directory, rename 'D:\Notario Network\SignVault\frontend\.next\cache\webpack\client-development-fallback\0.pack.gz_' -> 'D:\Notario Network\SignVault\frontend\.next\cache\webpack\client-development-fallback\0.pack.gz'
 GET / 500 in 32ms
Avatar
! hxrjxtOP
Fixed it by deleting the .next directory and running bun dev...
Answer
Avatar
! hxrjxtOP
:pepeSMH: