N/A
Generated Pages Functions bundle size (26272676) is over the limit of 25.0 MiB
Failed: generating Pages Functions failed. Check the logs above for more information.
Subject: Build Failure Due to Pages Functions Bundle Size Exceeding Limit
Hello,
I’m encountering an issue while deploying my Next.js application on Cloudflare Pages. The build process fails with the following error message:
Failed: generating Pages Functions failed. Check the logs above for more information. If this continues for an unknown reason, contact support: https://cfl.re/3WgEyrH
Earlier in the build logs, it mentions:
Generated Pages Functions bundle size (26272676) is over the limit of 25.0 MiB
It appears that the Pages Functions bundle size exceeds the 25 MiB limit. Below are relevant excerpts from the build logs:
Log:2024-11-05T13:49:16.884487Z Cloning repository...2024-11-05T13:49:18.056152Z F - Pastebin.com
I already open a ticket for it 01259149, but I can check it on my case panel on Salesforce.
I have a significant number of modules and functions, which likely contributes to the large bundle size. I’m looking for advice on how to reduce the bundle size or any alternative solutions to handle this situation.
Any guidance on optimizing the build for Cloudflare Pages or handling large bundles would be greatly appreciated.
Thank you for your assistance!
Best regards,
Matheus
Remove any dependencies you don’t need, if you can tree shake a specific one better do that, try to find less heavy dependencies.
Really just comes down to finding what’s taking up the most space and trying to reduce it however possible
Alternatively, split some parts into a Worker and jsrpc over to that Worker.
Hello,
I’m experiencing a build failure due to the Pages Functions bundle size exceeding the limit on Cloudflare Pages.
I’m using Next.js, and my project used to compile successfully using next-on-pages. After making some changes to the folder structure (services, schema, etc.), it no longer compiles. I’ve already removed several dependencies to try to reduce the bundle size, but the issue persists.
I suspect that it might not be possible to use jsrpc in this context, and that might be contributing to the problem.
Here is the error message I’m receiving:
Failed: generating Pages Functions failed. Check the logs above for more information.
Generated Pages Functions bundle size (26272676) is over the limit of 25.0 MiB
Below is my package.json for reference:
{
[...]
"scripts": {
"build:cloudflare": "npx @cloudflare/next-on-pages@1",
"dev:cloudflare": "npx wrangler pages dev .vercel/output/static --compatibility-flag=nodejs_compat --compatibility-date=2023-07-10",
"start:cloudflare": "npx wrangler pages dev .vercel/output/static --compatibility-flag=nodejs_compat --compatibility-date=2023-07-10",
"watch": "npx wrangler pages dev .vercel/output/static --compatibility-flag=nodejs_compat --compatibility-date=2023-07-10"
},
"dependencies": {
"@dnd-kit/core": "^6.1.0",
"@dnd-kit/sortable": "^8.0.0",
"@dnd-kit/utilities": "^3.2.2",
"@emoji-mart/data": "^1.2.1",
"@emoji-mart/react": "^1.1.1",
"@hookform/resolvers": "^3.3.4",
"@octokit/rest": "^21.0.2",
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-alert-dialog": "^1.0.5",
"@radix-ui/react-aspect-ratio": "^1.0.3",
"@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-collapsible": "^1.0.3",
"@radix-ui/react-context-menu": "^2.1.5",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-hover-card": "^1.0.7",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-menubar": "^1.0.4",
"@radix-ui/react-navigation-menu": "^1.1.4",
"@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-progress": "^1.0.3",
"@radix-ui/react-radio-group": "^1.1.3",
"@radix-ui/react-scroll-area": "^1.0.5",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slider": "^1.1.2",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-switch": "^1.0.3",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-toast": "^1.1.5",
"@radix-ui/react-toggle": "^1.0.3",
"@radix-ui/react-toggle-group": "^1.0.4",
"@radix-ui/react-tooltip": "^1.0.7",
"@semantic-release/commit-analyzer": "^12.0.0",
"@semantic-release/github": "^10.0.3",
"@semantic-release/npm": "^12.0.0",
"@semantic-release/release-notes-generator": "^13.0.0",
"@sentry/nextjs": "^7.119.2",
"@t3-oss/env-nextjs": "^0.11.1",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tanstack/react-table": "^8.16.0",
"@vercel/analytics": "^1.2.2",
"@vercel/og": "^0.6.2",
"axios": "^1.7.2",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"cmdk": "^1.0.0",
"cobe": "^0.6.3",
"country-state-city": "^3.2.1",
"date-fns": "^3.6.0",
"embla-carousel-autoplay": "^8.3.0",
"embla-carousel-react": "^8.0.4",
"emoji-mart": "^5.6.0",
"file-saver": "^2.0.5",
"framer-motion": "^11.1.7",
"input-otp": "^1.2.4",
"jwt-decode": "^4.0.0",
"lucide-react": "^0.454.0",
"next": "^14.1.4",
"next-auth": "^5.0.0-beta.25",
"next-compose-plugins": "^2.2.1",
"next-international": "^1.2.4",
"next-seo": "^6.5.0",
"next-sitemap": "^4.2.3",
"next-themes": "^0.3.0",
"postmark": "^4.0.2",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-currency-input-field": "^3.8.0",
"react-day-picker": "^8.10.1",
"react-dom": "^18.3.1",
"react-dropzone": "^14.2.3",
"react-hook-form": "^7.51.4",
"react-input-mask": "^3.0.0-alpha.2",
"react-intersection-observer": "^9.13.1",
"react-number-format": "^5.3.4",
"react-phone-number-input": "^3.4.1",
"react-resizable-panels": "^2.0.19",
"react-spring": "^9.7.4",
"react-textarea-autosize": "^8.5.3",
"react-use-draggable-scroll": "^0.4.7",
"recharts": "^2.12.6",
"sharp": "^0.33.3",
"sonner": "^1.4.41",
"tailwind-merge": "^2.3.0",
"tailwindcss-animate": "^1.0.7",
"vaul": "^0.9.1",
"web-vitals": "^3.5.2",
"zod": "^3.23.8",
"zustand": "^4.5.2"
},
"devDependencies": {
"@babel/core": "^7.24.5",
"@changesets/changelog-github": "^0.5.0",
"@changesets/cli": "^2.27.1",
"@cloudflare/next-on-pages": "^1.11.3",
"@commitlint/cli": "^19.3.0",
"@commitlint/config-conventional": "^19.2.2",
"@commitlint/cz-commitlint": "^19.2.0",
"@edge-runtime/vm": "^3.2.0",
"@faker-js/faker": "^8.4.1",
"@next/bundle-analyzer": "^14.2.3",
"@percy/cli": "^1.28.6",
"@playwright/test": "^1.47.0",
"@semantic-release/changelog": "^6.0.3",
"@semantic-release/git": "^10.0.1",
"@tailwindcss/line-clamp": "^0.4.4",
"@tailwindcss/typography": "^0.5.13",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.4.5",
"@testing-library/react": "^16.0.0",
"@total-typescript/ts-reset": "^0.5.1",
"@types/editorjs__header": "^2.6.3",
"@types/file-saver": "^2",
"@types/mdx": "^2.0.13",
"@types/node": "18",
"@types/react": "^18.3.12",
"@types/react-color": "^3.0.12",
"@types/react-dom": "18.3.0",
"@types/react-input-mask": "^3.0.5",
"@typescript-eslint/eslint-plugin": "^7.18.0",
"@typescript-eslint/parser": "^7.18.0",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.19",
"commitizen": "^4.3.0",
"concurrently": "^8.2.2",
"cross-env": "^7.0.3",
"cssnano": "^7.0.0",
"dotenv": "^16.4.5",
"esbuild": "^0.21.0",
"eslint": "^8.57.0",
"eslint-config-next": "^14.2.3",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-jest": "^28.0.0",
"eslint-plugin-jest-dom": "^5.2.0",
"eslint-plugin-jest-formatting": "^3.1.0",
"eslint-plugin-jsdoc": "^48.2.5",
"eslint-plugin-simple-import-sort": "^12.1.0",
"eslint-plugin-tailwindcss": "^3.15.1",
"eslint-plugin-testing-library": "^6.2.2",
"eslint-plugin-unused-imports": "^4.1.4",
"eslint-plugin-vitest": "^0.5.4",
"husky": "^9.0.11",
"jsdom": "^24.0.0",
"lint-staged": "^15.2.2",
"mdast-util-toc": "^7.0.1",
"postcss": "^8.4.38",
"prettier": "^3.2.5",
"prettier-plugin-tailwindcss": "^0.6.0",
"pretty-quick": "^4.0.0",
"rimraf": "^5.0.7",
"run-s": "^0.0.0",
"semantic-release": "^24.0.0",
"sonarqube-scanner": "^3.5.0",
"tailwindcss": "^3.4.3",
"tailwindcss-animate": "^1.0.7",
"ts-node": "^10.9.2",
"turbo": "^2.0.0",
"typescript": "^5.4.5",
"unist-builder": "4.0.0",
"unist-util-visit": "^5.0.0",
"vite-tsconfig-paths": "^4.3.2",
"vitest": "^1.6.0"
},
"resolutions": {
"@opentelemetry/api": "1.9.0",
"@opentelemetry/core": "1.25.0",
"@opentelemetry/exporter-trace-otlp-grpc": "0.52.0",
"@opentelemetry/resources": "1.25.0",
"@opentelemetry/sdk-trace-base": "1.25.0",
"@opentelemetry/sdk-trace-node": "1.25.0",
"@opentelemetry/semantic-conventions": "1.25.0"
},
"config": {
"commitizen": {
"path": "@commitlint/cz-commitlint"
}
},
"release": {
"branches": [
"main"
],
"plugins": [
"@semantic-release/commit-analyzer",
"@semantic-release/release-notes-generator",
"@semantic-release/changelog",
[
"@semantic-release/npm",
{
"npmPublish": false
}
],
"@semantic-release/git",
"@semantic-release/github"
]
},
"engines": {
"node": "18.17"
},
"packageManager": "[email protected]"
}
I would appreciate any help or guidance on resolving this issue.
Thank you!
Hello everyone,
I wanted to share how I resolved the issue with the Pages Functions bundle size exceeding the 25 MiB limit on Cloudflare Pages.
I used the @next/bundle-analyzer package to analyze my Next.js project’s build. By integrating it into my next.config.js, I was able to identify which dependencies were contributing the most to the bundle size.
Here’s how I set it up:
Installation
yarn add @next/bundle-analyzer
Configuration
In next.config.js, I added the following configuration:
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer({
// your existing Next.js config
});
Usage
Then, I ran the build with the analyzer enabled:
ANALYZE=true yarn build
This generated HTML reports (client.html, edge.html, and nodejs.html) in the ./analyze directory, showing detailed insights into the bundle sizes.
Analysis
I carefully examined the reports and identified the dependencies that were significantly increasing the bundle size. After evaluating their necessity, I removed or replaced them with lighter alternatives.
By doing this, I reduced the bundle size from 26 MiB to 16 MiB, which is well below the Cloudflare Pages limit. The build now completes successfully, and the deployment works as expected.
Tip: If you’re using next-compose-plugins, make sure to integrate @next/bundle-analyzer correctly:
const withPlugins = require('next-compose-plugins');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
module.exports = withPlugins([
[withBundleAnalyzer],
// other plugins...
]);
Conclusion
If you’re facing similar issues with bundle size limits, I recommend using @next/bundle-analyzer to pinpoint and optimize heavy dependencies. It made a significant difference in my project’s build size.
Hope this helps!
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.