fix(js,ui): Conflicting ports (#7433)

Author: tmilewski

.changeset/loose-trams-look.md

@@ -0,0 +1,2 @@
+---
+---

packages/clerk-js/playwright.config.ts

@@ -8,7 +8,7 @@ import { defineConfig, devices } from '@playwright/test';
 // import path from 'path';
 // dotenv.config({ path: path.resolve(__dirname, '.env') });
 
-const PORT = process.env.PORT || 4001;
+const PORT = process.env.PORT || 4011;
 const baseURL = `http://localhost:${PORT}`;
 
 /**

packages/clerk-js/rspack.config.js

@@ -463,7 +463,7 @@ const devConfig = ({ mode, env }) => {
             template: './sandbox/template.html',
             inject: false,
             templateParameters: {
-              uiScriptUrl: 'http://localhost:4001/npm/ui.browser.js',
+              uiScriptUrl: 'http://localhost:4011/npm/ui.browser.js',
             },
           }),
       ].filter(Boolean),

packages/ui/package.json

@@ -53,8 +53,8 @@
     "bundlewatch:fix": "node bundlewatch-fix.mjs",
     "clean": "rimraf ./dist",
     "dev": "tsdown --watch src",
-    "dev:origin": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4001}",
-    "dev:sandbox": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:4001",
+    "dev:origin": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4011}",
+    "dev:sandbox": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:4011",
     "format": "node ../../scripts/format-package.mjs",
     "format:check": "node ../../scripts/format-package.mjs --check",
     "lint:attw": "attw --pack . --exclude-entrypoints themes/shadcn.css --profile esm-only",

packages/ui/rspack.config.js

@@ -160,7 +160,7 @@ const prodConfig = mode => {
  */
 const devConfig = (mode, env) => {
   const devUrl = new URL(env.devOrigin || 'https://ui.lclclerk.com');
-  const port = Number(new URL(env.devOrigin ?? 'http://localhost:4001').port || 4001);
+  const port = Number(new URL(env.devOrigin ?? 'http://localhost:4011').port || 4011);
 
   return merge(entryForVariant(variants.uiBrowser), common({ mode, variant: variants.uiBrowser }), {
     module: {

packages/ui/src/internal/index.ts

@@ -92,5 +92,5 @@ export type {
  */
 export const localUiForTesting = {
   version: PACKAGE_VERSION,
-  url: 'http://localhost:4001/npm/ui.browser.js',
+  url: 'http://localhost:4011/npm/ui.browser.js',
 } as Ui<Appearance & { newprop?: string }>;