chore(clerk-js): Migrate to rspack for building - #4106
Conversation
🦋 Changeset detectedLatest commit: 6b82938 The changes in this PR will be included in the next version bump. This PR includes changesets to release 5 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| "watch": "rspack build --config rspack.config.js --env production --watch" | ||
| }, | ||
| "browserslist": "last 2 versions, ios_saf > 12, Safari > 12, > 1%, not dead, not ie > 0", | ||
| "browserslist": "last 2 years", |
There was a problem hiding this comment.
This is essentially Chrome >108, Safari >16.2, and Firefox >107.
There was a problem hiding this comment.
Don't we still need ios_saf > 12, Safari > 12 ?
There was a problem hiding this comment.
I remember us having to fix issues for older iOS versions, right?
There was a problem hiding this comment.
We have one customer who was using v4 on versions as old as Safari 12. After discussing it with the team I believe we're going to implement a specific build for that customer and serve it via the Cloudflare Worker.
Prior to this PR, this browserslist config had no impact on the final build. I confirmed by setting it to Safari 9 (which did not support arrow functions () => {}) and confirmed that the resulting JavaScript files still contained arrow functions.
Ultimately, I think this meant that our older browser support wasn't tool enforced; it was solely a result of the APIs and JS language features we used.
There was a problem hiding this comment.
I think, for now, I'm going to set the browserslist property to last 2 years, Safari > 12, iOS > 12. We can explore dropping the Safari support in a future PR once we've implemented custom builds for customers who need it.
| maxChunks: 1, | ||
| }), | ||
| ], | ||
| optimization: { |
There was a problem hiding this comment.
This was added because the LimitChunkCountPlugin doesn't reliably result in a single file.
|
|
||
| import { Form } from '../common/form'; | ||
| import { usePathnameWithoutCatchAll } from '../utils/path-inference/next'; | ||
| import { removeOptionalCatchAllSegment } from '../utils/path-inference/utils'; |
There was a problem hiding this comment.
The previous version was Next specific, which required that Elements depend on Next.js, resulting in it being included in the clerk-js bundle. This change instead uses the host router without specifically calling useRouter.
| publish: $all | ||
| proxy: npmjs | ||
| log: { type: stdout, format: pretty, level: http } | ||
| max_body_size: 20mb |
There was a problem hiding this comment.
The default max_body_size is 10mb. The tarball of clerk-js built by Rspack is over 15mb, so this was increased to prevent a 413 error during integration tests.
| "watch": "rspack build --config rspack.config.js --env production --watch" | ||
| }, | ||
| "browserslist": "last 2 versions, ios_saf > 12, Safari > 12, > 1%, not dead, not ie > 0", | ||
| "browserslist": "last 2 years", |
There was a problem hiding this comment.
I remember us having to fix issues for older iOS versions, right?
Co-authored-by: Dylan Staley <88163+dstaley@users.noreply.github.com>
6 participants
Description
This PR switches from Webpack to Rspack, resulting in a 10x build time improvement.
Checklist
npm testruns as expected.npm run buildruns as expected.Type of change