build(ui): Remove display name babel plugins (#84256)

babel.config.ts

@@ -22,13 +22,10 @@ const config: TransformOptions = {
   overrides: [],
   plugins: ['@emotion/babel-plugin', '@babel/plugin-transform-runtime'],
   env: {
-    production: {
-      plugins: [['babel-plugin-add-react-displayname']],
-    },
+    production: {},
     development: {
       plugins: [
         '@emotion/babel-plugin',
-        '@babel/plugin-transform-react-jsx-source',
         ...(process.env.SENTRY_UI_HOT_RELOAD ? ['react-refresh/babel'] : []),
       ],
     },

package.json

@@ -10,8 +10,6 @@
   "dependencies": {
     "@acemarke/react-prod-sourcemaps": "^0.2.1",
     "@babel/core": "~7.25.9",
-    "@babel/plugin-transform-react-jsx": "^7.25.9",
-    "@babel/plugin-transform-react-jsx-source": "^7.25.9",
     "@babel/plugin-transform-runtime": "~7.25.9",
     "@babel/preset-env": "~7.25.9",
     "@babel/preset-react": "^7.25.9",
@@ -94,7 +92,6 @@
     "@types/webpack-env": "^1.18.5",
     "ansi-to-react": "^6.1.6",
     "babel-loader": "^9.2.1",
-    "babel-plugin-add-react-displayname": "^0.0.5",
     "browserslist": "^4.22.2",
     "buffer": "^6.0.3",
     "cbor-web": "^8.1.0",

static/app/components/sidebar/sidebarAccordion.tsx

@@ -62,7 +62,7 @@ function SidebarAccordion({
   const isActive = isItemActive(itemProps);
   const hasMainLink = Boolean(itemProps.to);
 
-  const childSidebarItems = findChildElementsInTree(children, 'SidebarItem');
+  const childSidebarItems = findChildElementsInTree(children, SidebarItem.displayName);
 
   const hasActiveChildren = Children.toArray(childSidebarItems).some(child => {
     if (isValidElement(child)) {
@@ -205,7 +205,7 @@ function findChildElementsInTree(
       typeof child.type === 'string'
         ? child.type
         : 'displayName' in child.type
-          ? (child.type.displayName as string) // `.displayName` is added by `babel-plugin-add-react-displayname` in production builds
+          ? (child.type.displayName as string) // `.displayName` is added manually
           : child.type.name; // `.name` is available in development builds
 
     if (currentComponentName === componentName) {

static/app/components/sidebar/sidebarItem.tsx

@@ -312,6 +312,7 @@ function SidebarItem({
     </Tooltip>
   );
 }
+SidebarItem.displayName = 'SidebarItem';
 
 export function isItemActive(
   item: Pick<SidebarItemProps, 'to' | 'label'>,

yarn.lock

@@ -866,13 +866,6 @@
   dependencies:
     "@babel/plugin-transform-react-jsx" "^7.25.9"
 
-"@babel/plugin-transform-react-jsx-source@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.25.9.tgz#4c6b8daa520b5f155b5fb55547d7c9fa91417503"
-  integrity sha512-+iqjT8xmXhhYv4/uiYd8FNQsraMFZIfxVSqxxVSZP0WbbSAWvBXAul0m/zu+7Vv4O/3WtApy9pmaTMiumEZgfg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.25.9"
-
 "@babel/plugin-transform-react-jsx@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.25.9.tgz#06367940d8325b36edff5e2b9cbe782947ca4166"
@@ -4918,11 +4911,6 @@ babel-loader@^9.2.1:
     find-cache-dir "^4.0.0"
     schema-utils "^4.0.0"
 
-babel-plugin-add-react-displayname@^0.0.5:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz#339d4cddb7b65fd62d1df9db9fe04de134122bd5"
-  integrity sha1-M51M3be2X9YtHfnbn+BN4TQSK9U=
-
 babel-plugin-istanbul@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz#fa88ec59232fd9b4e36dbbc540a8ec9a9b47da73"