search

backstage / backstage

Backstage is an open framework for building developer portals
https://backstage.io/
Apache License 2.0
27.35k stars 5.77k forks source link

🐛 Bug Report: Console errors from MUI4 components used in core-components SidebarItem #24737

Open tikabom opened 3 months ago

tikabom commented 3 months ago

📜 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 - 

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: 

<SidebarItem
          text="Create..."
          icon={CreateComponentIcon}
          onClick={() => handleClick()}
        />

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: https://github.com/backstage/backstage/blob/3c47d9b755421c39c0109a7f27b68217e9639456/packages/core-components/src/layout/Sidebar/Items.tsx#L466-L474

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

OS:   Darwin 23.4.0 - darwin/arm64
node: v20.11.0
yarn: 3.8.1
cli:  0.26.4 (installed)
backstage:  1.26.5

Dependencies:
  @backstage/app-defaults                                          1.5.4
  @backstage/backend-app-api                                       0.7.2
  @backstage/backend-common                                        0.21.7
  @backstage/backend-defaults                                      0.2.17
  @backstage/backend-dev-utils                                     0.1.4
  @backstage/backend-openapi-utils                                 0.1.10
  @backstage/backend-plugin-api                                    0.6.17
  @backstage/backend-tasks                                         0.5.22
  @backstage/backend-test-utils                                    0.3.7
  @backstage/catalog-client                                        1.6.4
  @backstage/catalog-model                                         1.4.5
  @backstage/cli-common                                            0.1.13
  @backstage/cli-node                                              0.2.5
  @backstage/cli                                                   0.26.4
  @backstage/config-loader                                         1.8.0
  @backstage/config                                                1.2.0
  @backstage/core-app-api                                          1.12.4
  @backstage/core-compat-api                                       0.2.4
  @backstage/core-components                                       0.14.6
  @backstage/core-plugin-api                                       1.9.2
  @backstage/dev-utils                                             1.0.31
  @backstage/errors                                                1.2.4
  @backstage/eslint-plugin                                         0.1.7
  @backstage/frontend-app-api                                      0.6.4
  @backstage/frontend-plugin-api                                   0.6.4
  @backstage/frontend-test-utils                                   0.1.6
  @backstage/integration-aws-node                                  0.1.12
  @backstage/integration-react                                     1.1.26
  @backstage/integration                                           1.10.0
  @backstage/plugin-api-docs                                       0.11.4
  @backstage/plugin-app-backend                                    0.3.65
  @backstage/plugin-app-node                                       0.1.17
  @backstage/plugin-app-visualizer                                 0.1.5
  @backstage/plugin-auth-backend-module-atlassian-provider         0.1.9
  @backstage/plugin-auth-backend-module-aws-alb-provider           0.1.9
  @backstage/plugin-auth-backend-module-azure-easyauth-provider    0.1.0
  @backstage/plugin-auth-backend-module-bitbucket-provider         0.1.0
  @backstage/plugin-auth-backend-module-cloudflare-access-provider 0.1.0
  @backstage/plugin-auth-backend-module-gcp-iap-provider           0.2.12
  @backstage/plugin-auth-backend-module-github-provider            0.1.14
  @backstage/plugin-auth-backend-module-gitlab-provider            0.1.14
  @backstage/plugin-auth-backend-module-google-provider            0.1.14
  @backstage/plugin-auth-backend-module-guest-provider             0.1.3
  @backstage/plugin-auth-backend-module-microsoft-provider         0.1.12
  @backstage/plugin-auth-backend-module-oauth2-provider            0.1.14
  @backstage/plugin-auth-backend-module-oauth2-proxy-provider      0.1.10
  @backstage/plugin-auth-backend-module-oidc-provider              0.1.8
  @backstage/plugin-auth-backend-module-okta-provider              0.0.10
  @backstage/plugin-auth-backend                                   0.22.4
  @backstage/plugin-auth-node                                      0.4.12
  @backstage/plugin-auth-react                                     0.1.1
  @backstage/plugin-catalog-backend-module-github-org              0.1.12
  @backstage/plugin-catalog-backend-module-github                  0.6.0
  @backstage/plugin-catalog-backend-module-scaffolder-entity-model 0.1.15
  @backstage/plugin-catalog-backend                                1.21.1
  @backstage/plugin-catalog-common                                 1.0.22
  @backstage/plugin-catalog-graph                                  0.4.4
  @backstage/plugin-catalog-import                                 0.10.10
  @backstage/plugin-catalog-node                                   1.11.1
  @backstage/plugin-catalog-react                                  1.11.3
  @backstage/plugin-catalog                                        1.19.0
  @backstage/plugin-events-node                                    0.3.3
  @backstage/plugin-home-react                                     0.1.12
  @backstage/plugin-home                                           0.7.3
  @backstage/plugin-org                                            0.6.24
  @backstage/plugin-permission-backend                             0.5.41
  @backstage/plugin-permission-common                              0.7.13
  @backstage/plugin-permission-node                                0.7.28
  @backstage/plugin-permission-react                               0.4.22
  @backstage/plugin-scaffolder-backend-module-azure                0.1.9
  @backstage/plugin-scaffolder-backend-module-bitbucket-cloud      0.1.7
  @backstage/plugin-scaffolder-backend-module-bitbucket-server     0.1.7
  @backstage/plugin-scaffolder-backend-module-bitbucket            0.2.7
  @backstage/plugin-scaffolder-backend-module-gerrit               0.1.9
  @backstage/plugin-scaffolder-backend-module-gitea                0.1.7
  @backstage/plugin-scaffolder-backend-module-github               0.2.7
  @backstage/plugin-scaffolder-backend-module-gitlab               0.3.3
  @backstage/plugin-scaffolder-backend                             1.22.5
  @backstage/plugin-scaffolder-common                              1.5.1
  @backstage/plugin-scaffolder-node                                0.4.3
  @backstage/plugin-scaffolder-react                               1.8.4
  @backstage/plugin-scaffolder                                     1.19.3
  @backstage/plugin-search-backend-module-catalog                  0.1.23
  @backstage/plugin-search-backend-module-pg                       0.5.26
  @backstage/plugin-search-backend-module-techdocs                 0.1.22
  @backstage/plugin-search-backend-node                            1.2.21
  @backstage/plugin-search-backend                                 1.5.7
  @backstage/plugin-search-common                                  1.2.11
  @backstage/plugin-search-react                                   1.7.10
  @backstage/plugin-search                                         1.4.10
  @backstage/plugin-techdocs-backend                               1.10.4
  @backstage/plugin-techdocs-node                                  1.12.3
  @backstage/plugin-techdocs-react                                 1.2.3
  @backstage/plugin-techdocs                                       1.10.4
  @backstage/plugin-user-settings                                  0.8.5
  @backstage/release-manifests                                     0.0.11
  @backstage/repo-tools                                            0.8.0
  @backstage/test-utils                                            1.5.4
  @backstage/theme                                                 0.5.3
  @backstage/types                                                 1.1.1
  @backstage/version-bridge                                        1.0.8

👀 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!

github-actions[bot] commented 1 month ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

benjdlambert commented 1 month ago

I think that this is most likely going to be fixed when we move away from material-ui@v4 and to the new mui@v5 in core-components. We don't really have a plan for what core-components will look like when we move. It could be worth following the milestone here and we're gonna be looking a polishing off mui@v5 support for the framework later on after summer, which will enable us to plan what to do with core-components.