Skip to content

chore(web-ui-registration): Review build configuration #37584

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ggazzo merged 1 commit into from
Nov 24, 2025
Merged

chore(web-ui-registration): Review build configuration #37584

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 0 additions & 9 deletions packages/web-ui-registration/.babelrc.json
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion packages/web-ui-registration/.eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"extends": ["@rocket.chat/eslint-config", "@rocket.chat/eslint-config/react"],
"ignorePatterns": ["**/dist"]
"ignorePatterns": ["dist", "storybook-static", "!.storybook"]
}
3 changes: 2 additions & 1 deletion packages/web-ui-registration/.storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { dirname, join } from 'path';

import type { StorybookConfig } from '@storybook/react-webpack5';

export default {
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
getAbsolutePath('@storybook/addon-essentials'),
getAbsolutePath('storybook-dark-mode'),
getAbsolutePath('@storybook/addon-webpack5-compiler-babel'),
getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

Verify SWC compiler compatibility and version constraint.

The switch from Babel to SWC for Storybook compilation is a significant tooling change. Additionally, the version constraint changed from ^3.0.6 to ~3.0.0 (more restrictive).

Ensure that:

  1. SWC supports all TypeScript/JSX features used in the Storybook stories
  2. The more restrictive version constraint (~3.0.0) is intentional
  3. Storybook builds and renders correctly with the new compiler

Run the following script to verify the package version and check for any known issues:

Also verify the Storybook build works correctly:

🏁 Script executed:

#!/bin/bash
# Verify SWC compiler package version exists and check documentation

# Check npm registry for available versions
npm view @storybook/addon-webpack5-compiler-swc versions --json | jq -r '.[]' | grep '^3.0'

# Check if 3.0.0 specifically exists
npm view @storybook/addon-webpack5-compiler-swc@3.0.0 version

Length of output: 65

🏁 Script executed:

#!/bin/bash
# Test Storybook build with SWC compiler

cd packages/web-ui-registration
npm run storybook -- --ci

Length of output: 495

🏁 Script executed:

#!/bin/bash
# View the full context of the main.ts file to understand the changes

cat packages/web-ui-registration/.storybook/main.ts

Length of output: 584

🏁 Script executed:

#!/bin/bash
# Check git diff or status to see what was changed

cd packages/web-ui-registration/.storybook
git diff main.ts 2>/dev/null || echo "Git diff not available"

Length of output: 0

🏁 Script executed:

#!/bin/bash
# Look for any babel config files that might need adjustment

fd -e '.babelrc' -e 'babel.config.js' -e 'babel.config.json' packages/web-ui-registration

Length of output: 417

🏁 Script executed:

#!/bin/bash
# Check if there are any TypeScript/JSX features in storybook stories

fd -e '.stories.tsx' -e '.stories.ts' packages/web-ui-registration/.storybook -o packages/web-ui-registration/src --max-depth 3 | head -5

Length of output: 183

🏁 Script executed:

#!/bin/bash
# Check package.json to see what Storybook version is being used

jq '.devDependencies | select(. != null) | keys[] | select(startswith("storybook") or startswith("@storybook"))' packages/web-ui-registration/package.json 2>/dev/null || \
grep -A5 '"@storybook' packages/web-ui-registration/package.json | head -20

Length of output: 223

🌐 Web query:

@storybook/addon-webpack5-compiler-swc TypeScript JSX compatibility

💡 Result:

Short answer: Yes — @storybook/addon-webpack5-compiler-swc uses swc-loader as Storybook's TS/JS compiler and supports .ts/.tsx files, but you must configure SWC/TSX JSX settings (especially React automatic runtime) and Storybook's TypeScript options appropriately.

What to do:

  • Install and enable the addon (it replaces Babel with swc-loader for JS/TS). [1]
  • In .storybook/main.{js,ts} set the swc option so SWC's jsc.transform.react.runtime = "automatic" (or set to "classic" if you need the old runtime). SWC does not auto-insert the jsx-runtime by default, so failing to set this can break React JSX loading. Example shown in the Storybook docs. [2][3]
  • Ensure your tsconfig.json jsx matches your setup (e.g., "jsx": "react-jsx" or "react-jsxdev" for automatic runtime) so TS and SWC agree on JSX emit.
  • If you need type checking, enable Storybook's typescript.check (fork-ts-checker) — the SWC addon only handles transpilation, not type-checking. [3]

References:

  • Addon page (installs/behavior). [1]
  • Storybook SWC troubleshooting and example setting runtime:'automatic'. [2]
  • Storybook SWC main-config docs (how to pass SWC options via .storybook/main). [3]

---

🏁 Script executed:

```shell
#!/bin/bash
# Check if SWC options are configured anywhere in the Storybook config

rg -n "swc" packages/web-ui-registration/.storybook/ -i

Length of output: 111

🏁 Script executed:

#!/bin/bash
# Check tsconfig.json for jsx setting

cat packages/web-ui-registration/tsconfig.json | jq '.compilerOptions.jsx' 2>/dev/null || grep -n '"jsx"' packages/web-ui-registration/tsconfig.json

Length of output: 0

🏁 Script executed:

#!/bin/bash
# Look for any additional Storybook config files

fd -type f packages/web-ui-registration/.storybook

Length of output: 170

🏁 Script executed:

#!/bin/bash
# Check if there's a root tsconfig or storybook config with SWC settings

find packages/web-ui-registration -name "*.config.*" -o -name ".storybook" -type d | head -10

Length of output: 39


---

🏁 Script executed:

```shell
#!/bin/bash
# Check for root-level tsconfig and its jsx setting

cat tsconfig.json 2>/dev/null | jq '.compilerOptions.jsx' 2>/dev/null || grep -n '"jsx"' tsconfig.json 2>/dev/null || echo "No root tsconfig or jsx setting found"

Length of output: 0

🏁 Script executed:

#!/bin/bash
# List all files in .storybook to see complete config

ls -la packages/web-ui-registration/.storybook/

Length of output: 350

🏁 Script executed:

#!/bin/bash
# Check if there's a .storybook/preview.ts or other config files

find packages/web-ui-registration/.storybook -type f

Length of output: 202


---

🏁 Script executed:

```shell
#!/bin/bash
# View preview.tsx to see if JSX is configured there

cat packages/web-ui-registration/.storybook/preview.tsx

Length of output: 762

🏁 Script executed:

#!/bin/bash
# Check package.json for any jest or swc config

cat packages/web-ui-registration/package.json | grep -A 20 '"swc"\|"jest"'

Length of output: 0

🏁 Script executed:

#!/bin/bash
# Look for any .swcrc or swc config files

find packages/web-ui-registration -name ".swcrc" -o -name "swc.config.*"

Length of output: 0

Configure SWC JSX runtime in framework options.

The migration from Babel to SWC requires explicit JSX runtime configuration. Per SWC documentation, the framework options in main.ts must include jsc.transform.react.runtime settings.

Update packages/web-ui-registration/.storybook/main.ts framework options from empty {} to:

framework: {
  name: getAbsolutePath('@storybook/react-webpack5'),
  options: {
    swcLoader: {
      jsc: {
        transform: {
          react: {
            runtime: 'automatic', // or 'classic' if using legacy React
          },
        },
      },
    },
  },
},

Also verify tsconfig.json aligns JSX setting with the SWC runtime chosen above (e.g., "jsx": "react-jsx" for automatic runtime).

🤖 Prompt for AI Agents 
In packages/web-ui-registration/.storybook/main.ts around line 10, the Storybook
framework options are empty and missing SWC JSX runtime configuration; update
the framework object to include the react-webpack5 framework with swcLoader
options that set jsc.transform.react.runtime to 'automatic' (or 'classic' if you
need legacy React) so SWC knows which JSX runtime to use, and then ensure
tsconfig.json's "jsx" compilerOption matches the chosen runtime (e.g.,
"react-jsx" for automatic).

],

framework: {
Expand Down
3 changes: 2 additions & 1 deletion packages/web-ui-registration/.storybook/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { themes } from '@storybook/theming';
import type { Parameters } from '@storybook/react';
import { themes } from '@storybook/theming';

import manifest from '../package.json';
import logo from './logo.svg';
import '@rocket.chat/fuselage/dist/fuselage.css';
Expand Down
12 changes: 4 additions & 8 deletions packages/web-ui-registration/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,10 @@
"storybook": "storybook dev -p 6006 --no-version-updates",
"typecheck": "tsc --noEmit"
},
"dependencies": {
"dompurify": "~3.2.7"
},
"devDependencies": {
"@babel/core": "~7.28.5",
"@babel/preset-env": "~7.28.5",
"@babel/preset-react": "~7.27.1",
"@babel/preset-typescript": "~7.27.1",
"@rocket.chat/core-typings": "workspace:~",
"@rocket.chat/css-in-js": "~0.31.25",
"@rocket.chat/emitter": "~0.31.25",
Expand All @@ -38,7 +37,7 @@
"@storybook/addon-actions": "^8.6.14",
"@storybook/addon-docs": "^8.6.14",
"@storybook/addon-essentials": "^8.6.14",
"@storybook/addon-webpack5-compiler-babel": "^3.0.6",
"@storybook/addon-webpack5-compiler-swc": "~3.0.0",
"@storybook/react": "^8.6.14",
"@storybook/react-webpack5": "^8.6.14",
"@storybook/theming": "^8.6.14",
Expand Down Expand Up @@ -70,8 +69,5 @@
},
"volta": {
"extends": "../../package.json"
},
"dependencies": {
"dompurify": "~3.2.7"
}
}
3 changes: 0 additions & 3 deletions packages/web-ui-registration/tsconfig.build.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "ESNext"
},
"include": ["./src/**/*"],
"exclude": ["./src/**/*.spec.ts", "./src/**/*.stories.tsx"]
}
3 changes: 1 addition & 2 deletions packages/web-ui-registration/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@
"extends": "@rocket.chat/tsconfig/client.json",
"compilerOptions": {
"rootDirs": ["./src","./.storybook"],
"outDir": "./dist",
"module": "CommonJS"
"outDir": "./dist"
},
"include": ["./src", "./.storybook"],
}
144 changes: 139 additions & 5 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10675,10 +10675,6 @@ __metadata:
version: 0.0.0-use.local
resolution: "@rocket.chat/web-ui-registration@workspace:packages/web-ui-registration"
dependencies:
"@babel/core": "npm:~7.28.5"
"@babel/preset-env": "npm:~7.28.5"
"@babel/preset-react": "npm:~7.27.1"
"@babel/preset-typescript": "npm:~7.27.1"
"@rocket.chat/core-typings": "workspace:~"
"@rocket.chat/css-in-js": "npm:~0.31.25"
"@rocket.chat/emitter": "npm:~0.31.25"
Expand All @@ -10696,7 +10692,7 @@ __metadata:
"@storybook/addon-actions": "npm:^8.6.14"
"@storybook/addon-docs": "npm:^8.6.14"
"@storybook/addon-essentials": "npm:^8.6.14"
"@storybook/addon-webpack5-compiler-babel": "npm:^3.0.6"
"@storybook/addon-webpack5-compiler-swc": "npm:~3.0.0"
"@storybook/react": "npm:^8.6.14"
"@storybook/react-webpack5": "npm:^8.6.14"
"@storybook/theming": "npm:^8.6.14"
Expand Down Expand Up @@ -11905,6 +11901,16 @@ __metadata:
languageName: node
linkType: hard

"@storybook/addon-webpack5-compiler-swc@npm:~3.0.0":
version: 3.0.0
resolution: "@storybook/addon-webpack5-compiler-swc@npm:3.0.0"
dependencies:
"@swc/core": "npm:^1.10.8"
swc-loader: "npm:^0.2.6"
checksum: 10/c2b0c26d8bf54875297c82d2159aeb62846048dc71d8e953a6d6301d8a5aedc4eb979cc75877b24a2f7e1667a5baa7116286c1da29bff4a1510d2b6ec657392c
languageName: node
linkType: hard

"@storybook/blocks@npm:8.6.14, @storybook/blocks@npm:^8.6.14":
version: 8.6.14
resolution: "@storybook/blocks@npm:8.6.14"
Expand Down Expand Up @@ -12303,6 +12309,13 @@ __metadata:
languageName: node
linkType: hard

"@swc/core-darwin-arm64@npm:1.15.3":
version: 1.15.3
resolution: "@swc/core-darwin-arm64@npm:1.15.3"
conditions: os=darwin & cpu=arm64
languageName: node
linkType: hard

"@swc/core-darwin-x64@npm:1.12.4":
version: 1.12.4
resolution: "@swc/core-darwin-x64@npm:1.12.4"
Expand All @@ -12317,6 +12330,13 @@ __metadata:
languageName: node
linkType: hard

"@swc/core-darwin-x64@npm:1.15.3":
version: 1.15.3
resolution: "@swc/core-darwin-x64@npm:1.15.3"
conditions: os=darwin & cpu=x64
languageName: node
linkType: hard

"@swc/core-linux-arm-gnueabihf@npm:1.12.4":
version: 1.12.4
resolution: "@swc/core-linux-arm-gnueabihf@npm:1.12.4"
Expand All @@ -12331,6 +12351,13 @@ __metadata:
languageName: node
linkType: hard

"@swc/core-linux-arm-gnueabihf@npm:1.15.3":
version: 1.15.3
resolution: "@swc/core-linux-arm-gnueabihf@npm:1.15.3"
conditions: os=linux & cpu=arm
languageName: node
linkType: hard

"@swc/core-linux-arm64-gnu@npm:1.12.4":
version: 1.12.4
resolution: "@swc/core-linux-arm64-gnu@npm:1.12.4"
Expand All @@ -12345,6 +12372,13 @@ __metadata:
languageName: node
linkType: hard

"@swc/core-linux-arm64-gnu@npm:1.15.3":
version: 1.15.3
resolution: "@swc/core-linux-arm64-gnu@npm:1.15.3"
conditions: os=linux & cpu=arm64 & libc=glibc
languageName: node
linkType: hard

"@swc/core-linux-arm64-musl@npm:1.12.4":
version: 1.12.4
resolution: "@swc/core-linux-arm64-musl@npm:1.12.4"
Expand All @@ -12359,6 +12393,13 @@ __metadata:
languageName: node
linkType: hard

"@swc/core-linux-arm64-musl@npm:1.15.3":
version: 1.15.3
resolution: "@swc/core-linux-arm64-musl@npm:1.15.3"
conditions: os=linux & cpu=arm64 & libc=musl
languageName: node
linkType: hard

"@swc/core-linux-x64-gnu@npm:1.12.4":
version: 1.12.4
resolution: "@swc/core-linux-x64-gnu@npm:1.12.4"
Expand All @@ -12373,6 +12414,13 @@ __metadata:
languageName: node
linkType: hard

"@swc/core-linux-x64-gnu@npm:1.15.3":
version: 1.15.3
resolution: "@swc/core-linux-x64-gnu@npm:1.15.3"
conditions: os=linux & cpu=x64 & libc=glibc
languageName: node
linkType: hard

"@swc/core-linux-x64-musl@npm:1.12.4":
version: 1.12.4
resolution: "@swc/core-linux-x64-musl@npm:1.12.4"
Expand All @@ -12387,6 +12435,13 @@ __metadata:
languageName: node
linkType: hard

"@swc/core-linux-x64-musl@npm:1.15.3":
version: 1.15.3
resolution: "@swc/core-linux-x64-musl@npm:1.15.3"
conditions: os=linux & cpu=x64 & libc=musl
languageName: node
linkType: hard

"@swc/core-win32-arm64-msvc@npm:1.12.4":
version: 1.12.4
resolution: "@swc/core-win32-arm64-msvc@npm:1.12.4"
Expand All @@ -12401,6 +12456,13 @@ __metadata:
languageName: node
linkType: hard

"@swc/core-win32-arm64-msvc@npm:1.15.3":
version: 1.15.3
resolution: "@swc/core-win32-arm64-msvc@npm:1.15.3"
conditions: os=win32 & cpu=arm64
languageName: node
linkType: hard

"@swc/core-win32-ia32-msvc@npm:1.12.4":
version: 1.12.4
resolution: "@swc/core-win32-ia32-msvc@npm:1.12.4"
Expand All @@ -12415,6 +12477,13 @@ __metadata:
languageName: node
linkType: hard

"@swc/core-win32-ia32-msvc@npm:1.15.3":
version: 1.15.3
resolution: "@swc/core-win32-ia32-msvc@npm:1.15.3"
conditions: os=win32 & cpu=ia32
languageName: node
linkType: hard

"@swc/core-win32-x64-msvc@npm:1.12.4":
version: 1.12.4
resolution: "@swc/core-win32-x64-msvc@npm:1.12.4"
Expand All @@ -12429,6 +12498,13 @@ __metadata:
languageName: node
linkType: hard

"@swc/core-win32-x64-msvc@npm:1.15.3":
version: 1.15.3
resolution: "@swc/core-win32-x64-msvc@npm:1.15.3"
conditions: os=win32 & cpu=x64
languageName: node
linkType: hard

"@swc/core@npm:1.13.19":
version: 1.13.19
resolution: "@swc/core@npm:1.13.19"
Expand Down Expand Up @@ -12475,6 +12551,52 @@ __metadata:
languageName: node
linkType: hard

"@swc/core@npm:^1.10.8":
version: 1.15.3
resolution: "@swc/core@npm:1.15.3"
dependencies:
"@swc/core-darwin-arm64": "npm:1.15.3"
"@swc/core-darwin-x64": "npm:1.15.3"
"@swc/core-linux-arm-gnueabihf": "npm:1.15.3"
"@swc/core-linux-arm64-gnu": "npm:1.15.3"
"@swc/core-linux-arm64-musl": "npm:1.15.3"
"@swc/core-linux-x64-gnu": "npm:1.15.3"
"@swc/core-linux-x64-musl": "npm:1.15.3"
"@swc/core-win32-arm64-msvc": "npm:1.15.3"
"@swc/core-win32-ia32-msvc": "npm:1.15.3"
"@swc/core-win32-x64-msvc": "npm:1.15.3"
"@swc/counter": "npm:^0.1.3"
"@swc/types": "npm:^0.1.25"
peerDependencies:
"@swc/helpers": ">=0.5.17"
dependenciesMeta:
"@swc/core-darwin-arm64":
optional: true
"@swc/core-darwin-x64":
optional: true
"@swc/core-linux-arm-gnueabihf":
optional: true
"@swc/core-linux-arm64-gnu":
optional: true
"@swc/core-linux-arm64-musl":
optional: true
"@swc/core-linux-x64-gnu":
optional: true
"@swc/core-linux-x64-musl":
optional: true
"@swc/core-win32-arm64-msvc":
optional: true
"@swc/core-win32-ia32-msvc":
optional: true
"@swc/core-win32-x64-msvc":
optional: true
peerDependenciesMeta:
"@swc/helpers":
optional: true
checksum: 10/280330d82328818138ed64fdcf9ea9abde6b6f16eca65a9d4db27dde06a8dfffd2649f3447d2243387277513c7430fa4142cafcfd64e943d682ce6a713cb8c2d
languageName: node
linkType: hard

"@swc/core@npm:^1.5.22":
version: 1.12.4
resolution: "@swc/core@npm:1.12.4"
Expand Down Expand Up @@ -34953,6 +35075,18 @@ __metadata:
languageName: node
linkType: hard

"swc-loader@npm:^0.2.6":
version: 0.2.6
resolution: "swc-loader@npm:0.2.6"
dependencies:
"@swc/counter": "npm:^0.1.3"
peerDependencies:
"@swc/core": ^1.2.147
webpack: ">=2"
checksum: 10/fe90948c02a51bb8ffcff1ce3590e01dc12860b0bb7c9e22052b14fa846ed437781ae265614a5e14344bea22001108780f00a6e350e28c0b3499bc4cd11335fb
languageName: node
linkType: hard

"swiper@npm:11.1.14":
version: 11.1.14
resolution: "swiper@npm:11.1.14"
Expand Down
Loading