You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Using the SidebarItem and Link components from backstage's core-components produces console errors in Portal.
👍 Expected behavior
No console errors for deprecated apis used in backstage's core-components.
👎 Actual Behavior with Screenshots
The SidebarItem component in backstage's core-components results in the following console error in Portal -
console.js:273 Warning: findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
at button
at ButtonBase (webpack-internal:///../../node_modules/@material-ui/core/esm/ButtonBase/ButtonBase.js:90:22)
at WithStyles (webpack-internal:///../../node_modules/@material-ui/styles/esm/withStyles/withStyles.js:65:31)
at Button (webpack-internal:///../../node_modules/@material-ui/core/esm/Button/Button.js:307:24)
at WithStyles (webpack-internal:///../../node_modules/@material-ui/styles/esm/withStyles/withStyles.js:65:31)
at eval (webpack-internal:///../../node_modules/@backstage/core-components/dist/index.esm.js:5953:11)
at eval (webpack-internal:///../../node_modules/@backstage/core-components/dist/index.esm.js:6099:11)
at div
at CreateNewSidebarMenu (webpack-internal:///./src/components/AppNav/CreateNewSidebarMenu.tsx:139:67)
at div
at StyledComponent (webpack-internal:///../../node_modules/@material-ui/styles/esm/styled/styled.js:96:28)
at div
at StyledComponent (webpack-internal:///../../node_modules/@material-ui/styles/esm/styled/styled.js:96:28)
at SidebarOpenStateProvider (webpack-internal:///../../node_modules/@backstage/core-components/dist/index.esm.js:4943:11)
at nav
at DesktopSidebar (webpack-internal:///../../node_modules/@backstage/core-components/dist/index.esm.js:5331:78)
at Sidebar (webpack-internal:///../../node_modules/@backstage/core-components/dist/index.esm.js:5417:17)
at AppNav (webpack-internal:///./src/components/AppNav/AppNav.tsx:85:19)
at div
at StyledComponent (webpack-internal:///../../node_modules/@material-ui/styles/esm/styled/styled.js:96:28)
at SidebarPinStateProvider (webpack-internal:///../../node_modules/@backstage/core-components/dist/index.esm.js:4980:11)
at SidebarPage (webpack-internal:///../../node_modules/@backstage/core-components/dist/index.esm.js:5237:82)
at SetupWizardBarrier (webpack-internal:///./src/components/SetupWizardBarrier.tsx:21:31)
at LicenseBarrier (webpack-internal:///./src/components/Paywall/LicenseBarrier.tsx:80:27)
at AppRootWrapper (webpack-internal:///./src/components/AppRootWrapper.tsx:23:27)
at AppContextProvider (webpack-internal:///../../node_modules/@backstage/core-compat-api/dist/index.esm.js:25:3)
at LegacyAppContextProvider (webpack-internal:///../../node_modules/@backstage/core-compat-api/dist/index.esm.js:197:87)
at LegacyRoutingProvider (webpack-internal:///../../node_modules/@backstage/core-compat-api/dist/index.esm.js:263:95)
at BackwardsCompatProvider (webpack-internal:///../../node_modules/@backstage/core-compat-api/dist/index.esm.js:283:227)
at BidirectionalCompatProvider (webpack-internal:///../../node_modules/@backstage/core-compat-api/dist/index.esm.js:291:101)
at Component (webpack-internal:///./src/App.tsx:69:19)
at Component (webpack-internal:///../../node_modules/@backstage/frontend-plugin-api/dist/index.esm.js:562:136)
at SignInPageWrapper (webpack-internal:///../../node_modules/@backstage/frontend-app-api/dist/index.esm.js:2693:14)
at Router (webpack-internal:///../../node_modules/react-router/dist/index.js:1201:15)
at BrowserRouter (webpack-internal:///../../node_modules/react-router-dom/dist/index.js:697:5)
at DefaultRouter (webpack-internal:///../../node_modules/@backstage/frontend-app-api/dist/index.esm.js:2709:82)
at AppRouter (webpack-internal:///../../node_modules/@backstage/frontend-app-api/dist/index.esm.js:2715:5)
at RouteTracker (webpack-internal:///../../node_modules/@backstage/frontend-plugin-api/dist/index.esm.js:319:11)
at AnalyticsContext (webpack-internal:///../../node_modules/@backstage/core-plugin-api/dist/index.esm.js:76:11)
at ErrorBoundary (webpack-internal:///../../node_modules/@backstage/frontend-plugin-api/dist/index.esm.js:257:5)
at Suspense
at ExtensionBoundary (webpack-internal:///../../node_modules/@backstage/frontend-plugin-api/dist/index.esm.js:330:11)
at ThemeProvider (webpack-internal:///../../node_modules/@material-ui/styles/esm/ThemeProvider/ThemeProvider.js:45:24)
at StylesProvider (webpack-internal:///../../node_modules/@material-ui/styles/esm/StylesProvider/StylesProvider.js:50:24)
at RtlProvider (webpack-internal:///../../node_modules/@mui/system/esm/RtlProvider/index.js:22:7)
at ThemeProvider (webpack-internal:///../../node_modules/@mui/private-theming/ThemeProvider/ThemeProvider.js:45:5)
at ThemeProvider (webpack-internal:///../../node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:59:5)
at ThemeProvider (webpack-internal:///../../node_modules/@mui/material/styles/ThemeProvider.js:26:14)
at StyledEngineProvider (webpack-internal:///../../node_modules/@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js:31:5)
at UnifiedThemeProvider (webpack-internal:///../../node_modules/@backstage/theme/dist/index.esm.js:685:11)
at Provider (webpack-internal:///../../plugins/encore-mui-theme/src/themeExtensions.tsx:51:18)
at AppThemeProvider (webpack-internal:///../../node_modules/@backstage/frontend-app-api/dist/index.esm.js:400:29)
at ApiProvider (webpack-internal:///../../node_modules/@backstage/core-app-api/dist/index.esm.js:98:11)
at AppComponent
at default
at Suspense
👟 Reproduction steps
Create a react app and add @backstage/core-components as a dependency. Create a new sidebar item with an onClick handler it uses an mui4 button under the hood like so:
📜 Description
Using the SidebarItem and Link components from backstage's core-components produces console errors in Portal.
👍 Expected behavior
No console errors for deprecated apis used in backstage's core-components.
👎 Actual Behavior with Screenshots
The SidebarItem component in backstage's core-components results in the following console error in Portal -
👟 Reproduction steps
Create a react app and add @backstage/core-components as a dependency. Create a new sidebar item with an
onClick
handler it uses an mui4 button under the hood like so:Or use the core-component Link component with an
onClick
handler. Will produce the same console error.📃 Provide the context for the Bug.
Looks to be a result of the muiv4 Button component use in the SidebarItem here:
backstage/packages/core-components/src/layout/Sidebar/Items.tsx
Lines 466 to 474 in 3c47d9b
For the Link component it seems muiv4 Link might be using a deprecated api.
@awanlin has additionally highlighted that this might be the result of logging added in react 18.3 around deprecated apis - https://react.dev/blog/2024/04/25/react-19-upgrade-guide#react-18-3
🖥️ Your Environment
👀 Have you spent some time to check if this bug has been raised before?
🏢 Have you read the Code of Conduct?
Are you willing to submit PR?
Yes I am willing to submit a PR!
The text was updated successfully, but these errors were encountered: