Bug: Wrong imports causing extreme bundle size and prohibits deployments on Edge

Richard87 commented 1 year ago

[x] Review the documentation: https://clerk.com/docs
[x] Search for existing issues: https://github.com/clerkinc/javascript/issues
[x] Go through package changelog files.
[x] Provide the Frontend API key from your application dashboard.

Package + Version

[ ] @clerk/clerk-js
[x] @clerk/clerk-react
[x] @clerk/nextjs
[ ] @clerk/remix
[ ] @clerk/types
[ ] @clerk/themes
[ ] @clerk/localizations
[ ] @clerk/clerk-expo
[ ] @clerk/backend
[x] @clerk/clerk-sdk-node
[ ] @clerk/shared
[ ] @clerk/fastify
[ ] @clerk/chrome-extension
[ ] gatsby-plugin-clerk
[ ] build/tooling/chore
[ ] other:

Dependencies + versions

Provide a json with the dependencies used in your project (copy paste from yarn.lock / package-lock.json) or a github project / template that reproduces the issue.

*Include the @clerk/ packages and their versions!**

Example:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "@clerk/nextjs": "^4.19.1",
    "@clerk/types": "^3.43.0",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.13.4",
    "@tanstack/react-query": "^4.29.25",
    "@zodios/react": "^10.4.5",
    "axios": "^1.4.0",
    "next": "13.4.2",
    "notistack": "^3.0.1",
    "react": "18.2.0",
    "react-cookie": "^4.1.1",
    "react-dom": "18.2.0",
    "react-responsive": "^9.0.2",
    "styled-components": "^6.0.0-rc.3",
    "validator": "^13.9.0",
    "yarn": "^1.22.19"
  },
  "devDependencies": {
    "@next/eslint-plugin-next": "^13.4.10",
    "@storybook/addon-essentials": "^7.0.23",
    "@storybook/addon-interactions": "^7.0.23",
    "@storybook/addon-links": "^7.0.23",
    "@storybook/blocks": "^7.0.23",
    "@storybook/nextjs": "^7.0.23",
    "@storybook/react": "^7.0.23",
    "@storybook/testing-library": "^0.0.14-next.2",
    "@types/react": "18.2.6",
    "@typescript-eslint/eslint-plugin": "^5.59.7",
    "@typescript-eslint/parser": "^5.59.7",
    "eslint": "^8.40.0",
    "eslint-config-next": "13.4.2",
    "eslint-plugin-storybook": "^0.6.12",
    "openapi-zod-client": "^1.9.0",
    "storybook": "^7.0.23",
    "typescript": "^5.0.4"
  }
}

Browser/OS

Cloudflare Pages

Description

I have created a short repository her describing the issue: https://github.com/Richard87/cloudflare-test I first thought the issue was at Cloudflare, but they just found it to be an issue with Clerk: https://github.com/cloudflare/next-on-pages/issues/47#issuecomment-1646076080

If you run the command npx @cloudflare/next-on-pages@1 you will notice a bunch of unneeded wasm files that are generated because of Clerk, which include alot of unneeded dependencies.

Edit

Leaving the a quote from the issue tagged above from Cloudflare:

To me, it seems like Clerk is using things that it has no need to, and, as such, it is resulting in big wasm files (1.4mb total) and webpack chunks that don't need to be there. In your repo for instance, the unzipped middleware function goes from 30kb -> 800kb after our deduping, just because it uses clerk - for some reason it has chunks that are of no relevance, like all of reactjs.

When I look at the chunks that use the Wasm files, and the font, they actually look like they're coming from @vercel/og somewhere, and the chunk that appears to be using the @vercel/og chunk relates to ImageResponse code in Next.js. And that chunk appears to be consumed in the next/server chunk (this code). And the next/server webpack chunk is used in the @clerk/nextjs webpack chunk.

jonsherrard commented 1 year ago

I'm getting this with Vercel and "@clerk/nextjs": "4.23.0", breaking the 50mb limit.

nikosdouvlis commented 1 year ago

Hello @jonsherrard and @Richard87 , thanks for the report - are you using the Clerk authMiddleware helper? authMiddleware uses import { NextResponse } from 'next/server'; which caused next/og to be bundled with the middleware code incorrectly by NextJS in the past.

We collaborated with the Vercel team and a fix for this was introduced with next@13.4.4-canary.13. Can you upgrade to the latest next version and let me know if you're still seeing the same?

Richard87 commented 1 year ago

Thanks for the quick turnaround!

Yes, I am using authMiddleware:

import { authMiddleware } from "@clerk/nextjs";

export default authMiddleware({
  publicRoutes: ["/(.*)"],
});

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

vercel build refuses to build with conflicting versions of Clerk and Next :/

 cloudflare-test git:(master) ✗ npx vercel build                                              
Vercel CLI 31.0.1
Warning: When using Next.js, it is recommended to place JavaScript Functions inside of the `pages/api` (provided by Next.js) directory instead of `api` (provided by Vercel). Other languages (Python, Go, etc) should still go in the `api` directory. Learn More: https://nextjs.org/docs/api-routes/introduction
WARNING: You should not upload the `.next` directory.
Installing dependencies...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @clerk/nextjs@4.23.0
npm ERR! Found: next@13.4.4-canary.13
npm ERR! node_modules/next
npm ERR!   next@"13.4.4-canary.13" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer next@">=10" from @clerk/nextjs@4.23.0
npm ERR! node_modules/@clerk/nextjs
npm ERR!   @clerk/nextjs@"^4.23.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: next@13.4.12
npm ERR! node_modules/next
npm ERR!   peer next@">=10" from @clerk/nextjs@4.23.0
npm ERR!   node_modules/@clerk/nextjs
npm ERR!     @clerk/nextjs@"^4.23.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/richard/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/richard/.npm/_logs/2023-07-24T10_15_51_359Z-debug-0.log
Error: Command "npm install" exited with 1

Richard87 commented 1 year ago

Thanks! upgrading Nextjs did solve the issue! :)

clerk-cookie commented 4 months ago

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

clerk / javascript