Skip to content
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

Jump to bottom

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

Open
2 tasks done
tikabom opened this issue May 13, 2024 · 0 comments
Open
2 tasks done

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

tikabom opened this issue May 13, 2024 · 0 comments
Labels
bug Something isn't working
Milestone
Migration to MUI v5

Comments

@tikabom
Copy link
Contributor

tikabom commented May 13, 2024

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

backstage/packages/core-components/src/layout/Sidebar/Items.tsx

Lines 466 to 474 in 3c47d9b

<Button
role="button"
aria-label={text}
{...childProps}
ref={ref}
onClick={handleClick}
>
{content}
</Button>

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?

  • I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

Are you willing to submit PR?

Yes I am willing to submit a PR!
@tikabom tikabom added the bug Something isn't working label May 13, 2024
@tikabom tikabom added this to the Migration to MUI v5 milestone May 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
Migration to MUI v5
Development

No branches or pull requests
1 participant
@tikabom