search

procore-oss / backstage-plugin-announcements

Announcements Plugin for Backstage
https://procore-oss.github.io/backstage-plugin-announcements/
MIT License
27 stars 21 forks source link

🐛 Bug Report: [ThemeProvider - mui v5 upgrade] Error opening Announcements page #472

Open stephenglass opened 1 week ago

stephenglass commented 1 week ago

📜 Description

Going to the announcements route (<AnnouncementsPage/>) shows an error and unable to load the page. Noticed this when upgrading @procore-oss/backstage-plugin-announcements from 0.10.0 -> 0.11.1. The last working version is 0.10.5.

Error suggests that AnnouncementsPage component need to be wrapped in a ThemeProvider to be able to access the theme params in the makeStyles.

👍 Expected behavior

Should be able to open the announcements page

👎 Actual Behavior with Screenshots

image

Console error logs:

getStylesCreator.js:21 
 MUI: The `styles` argument provided is invalid.
You are providing a function without a theme in the context.
One of the parent elements needs to use a ThemeProvider.
getStylesCreator.js:21 
 MUI: The `styles` argument provided is invalid.
You are providing a function without a theme in the context.
One of the parent elements needs to use a ThemeProvider.
getStylesCreator.js:24 
 Uncaught TypeError: Cannot read properties of undefined (reading 'text')
    at eval (AnnouncementsPage.esm.js:32:1)
    at Object.create (getStylesCreator.js:16:1)
    at attach (makeStyles.js:81:1)
    at eval (makeStyles.js:199:1)
    at useSynchronousEffect (makeStyles.js:159:1)
    at useStyles (makeStyles.js:191:1)
    at AnnouncementsGrid (AnnouncementsPage.esm.js:128:1)
    at renderWithHooks (react-dom.development.js:15486:1)
    at mountIndeterminateComponent (react-dom.development.js:20103:1)
    at beginWork (react-dom.development.js:21626:1)
getStylesCreator.js:21 
 MUI: The `styles` argument provided is invalid.
You are providing a function without a theme in the context.
One of the parent elements needs to use a ThemeProvider.
getStylesCreator.js:21 
 MUI: The `styles` argument provided is invalid.
You are providing a function without a theme in the context.
One of the parent elements needs to use a ThemeProvider.
getStylesCreator.js:24 
 Uncaught TypeError: Cannot read properties of undefined (reading 'text')
    at eval (AnnouncementsPage.esm.js:32:1)
    at Object.create (getStylesCreator.js:16:1)
    at attach (makeStyles.js:81:1)
    at eval (makeStyles.js:199:1)
    at useSynchronousEffect (makeStyles.js:159:1)
    at useStyles (makeStyles.js:191:1)
    at AnnouncementsGrid (AnnouncementsPage.esm.js:128:1)
    at renderWithHooks (react-dom.development.js:15486:1)
    at mountIndeterminateComponent (react-dom.development.js:20103:1)
    at beginWork (react-dom.development.js:21626:1)

react-dom.development.js:18704 
 The above error occurred in the <AnnouncementsGrid> component:

    at AnnouncementsGrid (webpack-internal:///../../node_modules/@procore-oss/backstage-plugin-announcements/dist/components/AnnouncementsPage/AnnouncementsPage.esm.js:169:3)
    at article
    at Content (webpack-internal:///../../node_modules/@backstage/core-components/dist/layout/Content/Content.esm.js:40:11)
    at main
    at ThemeProvider (webpack-internal:///../../node_modules/@material-ui/styles/esm/ThemeProvider/ThemeProvider.js:45:24)
    at Page (webpack-internal:///../../node_modules/@backstage/core-components/dist/layout/Page/Page.esm.js:34:11)
    at AnnouncementsPage (webpack-internal:///../../node_modules/@procore-oss/backstage-plugin-announcements/dist/components/AnnouncementsPage/AnnouncementsPage.esm.js:242:82)
    at RenderedRoute (webpack-internal:///../../node_modules/react-router/dist/index.js:578:5)
    at Routes (webpack-internal:///../../node_modules/react-router/dist/index.js:1279:5)
    at Router
    at RoutableExtensionWrapper (webpack-internal:///../../node_modules/@backstage/core-plugin-api/dist/extensions/extensions.esm.js:34:107)
    at AnalyticsContext (webpack-internal:///../../node_modules/@backstage/core-plugin-api/dist/analytics/AnalyticsContext.esm.js:30:11)
    at PluginErrorBoundary (webpack-internal:///../../node_modules/@backstage/core-plugin-api/dist/extensions/PluginErrorBoundary.esm.js:9:1)
    at Suspense
    at Result (webpack-internal:///../../node_modules/@backstage/core-plugin-api/dist/extensions/extensions.esm.js:97:79)
    at RenderedRoute (webpack-internal:///../../node_modules/react-router/dist/index.js:578:5)
    at FlatRoutes (webpack-internal:///../../node_modules/@backstage/core-app-api/dist/routing/FlatRoutes.esm.js:19:81)
    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/layout/Sidebar/SidebarPinStateContext.esm.js:23:11)
    at SidebarPage (webpack-internal:///../../node_modules/@backstage/core-components/dist/layout/Sidebar/Page.esm.js:54:82)
    at Root (webpack-internal:///./src/components/Root/Root.tsx:108:17)
    at SignInPageWrapper (webpack-internal:///../../node_modules/@backstage/core-app-api/dist/app/AppRouter.esm.js:39:14)
    at Router (webpack-internal:///../../node_modules/react-router/dist/index.js:1213:15)
    at BrowserRouter (webpack-internal:///../../node_modules/react-router-dom/dist/index.js:703:5)
    at AppRouter (webpack-internal:///../../node_modules/@backstage/core-app-api/dist/app/AppRouter.esm.js:55:138)
    at Suspense
    at RoutingProvider (webpack-internal:///../../node_modules/@backstage/core-app-api/dist/routing/RoutingProvider.esm.js:18:3)
    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/@backstage/theme/node_modules/@mui/system/esm/RtlProvider/index.js:22:7)
    at ThemeProvider (webpack-internal:///../../node_modules/@backstage/theme/node_modules/@mui/private-theming/ThemeProvider/ThemeProvider.js:45:5)
    at ThemeProvider (webpack-internal:///../../node_modules/@backstage/theme/node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:59:5)
    at ThemeProvider (webpack-internal:///../../node_modules/@backstage/theme/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/unified/UnifiedThemeProvider.esm.js:27:11)
    at Provider (webpack-internal:///./src/App.tsx:150:26)
    at AppThemeProvider (webpack-internal:///../../node_modules/@backstage/core-app-api/dist/app/AppThemeProvider.esm.js:50:29)
    at AppContextProvider (webpack-internal:///../../node_modules/@backstage/core-app-api/dist/app/AppContext.esm.js:14:3)
    at ApiProvider (webpack-internal:///../../node_modules/@backstage/core-app-api/dist/apis/system/ApiProvider.esm.js:19:11)
    at Provider (webpack-internal:///../../node_modules/@backstage/core-app-api/dist/app/AppManager.esm.js:176:25)
    at AppRoot

React will try to recreate this component tree from scratch using the error boundary you provided, PluginErrorBoundary.

👟 Reproduction steps

Go to the route serving the <AnnouncementsPage/> component

📃 Provide the context for the Bug.

Unable to display the announcements page

🖥️ Your Environment

Backstage v1.31.3

"@procore-oss/backstage-plugin-announcements-backend": "^0.10.3",
"@procore-oss/backstage-plugin-search-backend-module-announcements": "^0.3.2",
OS:   Linux 5.15.153.1-microsoft-standard-WSL2 - linux/x64
node: v20.16.0
yarn: 4.3.1
cli:  0.27.1 (installed)
backstage:  1.31.3

Dependencies:
  @backstage/app-defaults                                          1.5.11
  @backstage/backend-app-api                                       1.0.0
  @backstage/backend-common                                        0.24.1, 0.25.0
  @backstage/backend-defaults                                      0.5.0
  @backstage/backend-dev-utils                                     0.1.5
  @backstage/backend-openapi-utils                                 0.1.18
  @backstage/backend-plugin-api                                    0.8.1, 1.0.0
  @backstage/backend-tasks                                         0.6.1
  @backstage/backend-test-utils                                    1.0.0
  @backstage/catalog-client                                        1.7.0
  @backstage/catalog-model                                         1.7.0
  @backstage/cli-common                                            0.1.14
  @backstage/cli-node                                              0.2.8
  @backstage/cli                                                   0.27.1
  @backstage/config-loader                                         1.9.1
  @backstage/config                                                1.2.0
  @backstage/core-app-api                                          1.15.0
  @backstage/core-compat-api                                       0.2.8, 0.3.0
  @backstage/core-components                                       0.14.10, 0.15.0
  @backstage/core-plugin-api                                       1.9.4
  @backstage/dev-utils                                             1.1.1
  @backstage/e2e-test-utils                                        0.1.1
  @backstage/errors                                                1.2.4
  @backstage/eslint-plugin                                         0.1.9
  @backstage/frontend-app-api                                      0.8.0
  @backstage/frontend-plugin-api                                   0.7.0, 0.8.0
  @backstage/integration-aws-node                                  0.1.12
  @backstage/integration-react                                     1.1.31, 1.1.32
  @backstage/integration                                           1.15.0
  @backstage/plugin-api-docs                                       0.11.10
  @backstage/plugin-app-backend                                    0.3.75
  @backstage/plugin-app-node                                       0.1.25
  @backstage/plugin-auth-backend-module-atlassian-provider         0.3.0
  @backstage/plugin-auth-backend-module-auth0-provider             0.1.0
  @backstage/plugin-auth-backend-module-aws-alb-provider           0.2.0
  @backstage/plugin-auth-backend-module-azure-easyauth-provider    0.2.0
  @backstage/plugin-auth-backend-module-bitbucket-provider         0.2.0
  @backstage/plugin-auth-backend-module-bitbucket-server-provider  0.1.0
  @backstage/plugin-auth-backend-module-cloudflare-access-provider 0.3.0
  @backstage/plugin-auth-backend-module-gcp-iap-provider           0.3.0
  @backstage/plugin-auth-backend-module-github-provider            0.2.0
  @backstage/plugin-auth-backend-module-gitlab-provider            0.2.0
  @backstage/plugin-auth-backend-module-google-provider            0.2.0
  @backstage/plugin-auth-backend-module-guest-provider             0.2.0
  @backstage/plugin-auth-backend-module-microsoft-provider         0.2.0
  @backstage/plugin-auth-backend-module-oauth2-provider            0.3.0
  @backstage/plugin-auth-backend-module-oauth2-proxy-provider      0.2.0
  @backstage/plugin-auth-backend-module-oidc-provider              0.3.0
  @backstage/plugin-auth-backend-module-okta-provider              0.1.0
  @backstage/plugin-auth-backend-module-onelogin-provider          0.2.0
  @backstage/plugin-auth-backend                                   0.23.0
  @backstage/plugin-auth-node                                      0.5.2
  @backstage/plugin-auth-react                                     0.1.6
  @backstage/plugin-bitbucket-cloud-common                         0.2.23
  @backstage/plugin-catalog-backend-module-github-org              0.3.1
  @backstage/plugin-catalog-backend-module-github                  0.7.4
  @backstage/plugin-catalog-backend-module-scaffolder-entity-model 0.2.0
  @backstage/plugin-catalog-backend                                1.26.1
  @backstage/plugin-catalog-common                                 1.1.0
  @backstage/plugin-catalog-graph                                  0.4.10
  @backstage/plugin-catalog-import                                 0.12.4
  @backstage/plugin-catalog-node                                   1.13.0
  @backstage/plugin-catalog-react                                  1.13.0, 1.13.1
  @backstage/plugin-catalog                                        1.23.1
  @backstage/plugin-events-backend                                 0.3.12
  @backstage/plugin-events-node                                    0.4.0
  @backstage/plugin-home-react                                     0.1.17
  @backstage/plugin-home                                           0.7.11
  @backstage/plugin-notifications-backend                          0.4.0
  @backstage/plugin-notifications-common                           0.0.5
  @backstage/plugin-notifications-node                             0.2.6
  @backstage/plugin-notifications                                  0.3.1
  @backstage/plugin-org                                            0.6.30
  @backstage/plugin-permission-backend-module-allow-all-policy     0.2.0
  @backstage/plugin-permission-backend                             0.5.49
  @backstage/plugin-permission-common                              0.8.1
  @backstage/plugin-permission-node                                0.8.3
  @backstage/plugin-permission-react                               0.4.26
  @backstage/plugin-proxy-backend                                  0.5.6
  @backstage/plugin-scaffolder-backend-module-azure                0.2.0
  @backstage/plugin-scaffolder-backend-module-bitbucket-cloud      0.2.0
  @backstage/plugin-scaffolder-backend-module-bitbucket-server     0.2.0
  @backstage/plugin-scaffolder-backend-module-bitbucket            0.3.0
  @backstage/plugin-scaffolder-backend-module-gerrit               0.2.0
  @backstage/plugin-scaffolder-backend-module-gitea                0.2.0
  @backstage/plugin-scaffolder-backend-module-github               0.5.0
  @backstage/plugin-scaffolder-backend-module-gitlab               0.5.0
  @backstage/plugin-scaffolder-backend                             1.25.0
  @backstage/plugin-scaffolder-common                              1.5.6
  @backstage/plugin-scaffolder-node-test-utils                     0.1.12
  @backstage/plugin-scaffolder-node                                0.4.11
  @backstage/plugin-scaffolder-react                               1.12.1
  @backstage/plugin-scaffolder                                     1.25.1
  @backstage/plugin-search-backend-module-catalog                  0.2.2
  @backstage/plugin-search-backend-module-pg                       0.5.35
  @backstage/plugin-search-backend-module-techdocs                 0.2.2
  @backstage/plugin-search-backend-node                            1.3.2
  @backstage/plugin-search-backend                                 1.5.17
  @backstage/plugin-search-common                                  1.2.14
  @backstage/plugin-search-react                                   1.8.0
  @backstage/plugin-search                                         1.4.17
  @backstage/plugin-signals-backend                                0.2.0
  @backstage/plugin-signals-node                                   0.1.11
  @backstage/plugin-signals-react                                  0.0.5
  @backstage/plugin-signals                                        0.0.10
  @backstage/plugin-techdocs-backend                               1.10.13
  @backstage/plugin-techdocs-common                                0.1.0
  @backstage/plugin-techdocs-module-addons-contrib                 1.1.15
  @backstage/plugin-techdocs-node                                  1.12.11
  @backstage/plugin-techdocs-react                                 1.2.8
  @backstage/plugin-techdocs                                       1.10.10
  @backstage/plugin-user-settings-common                           0.0.1
  @backstage/plugin-user-settings                                  0.8.13
  @backstage/release-manifests                                     0.0.11
  @backstage/repo-tools                                            0.9.7
  @backstage/test-utils                                            1.6.0
  @backstage/theme                                                 0.5.7
  @backstage/types                                                 1.1.1
  @backstage/version-bridge                                        1.0.9

👀 Have you spent some time to check if this bug has been raised before?

Are you willing to submit PR?

No, but I'm happy to collaborate on a PR with someone else

kurtaking commented 1 day ago

@stephenglass - will look into this tomorrow. This has something to do with the upgrade to mui v5.

What version is your instance on, and are you using a custom theme?

stephenglass commented 1 day ago

Thanks! I'm using Backstage 1.31.3 and still using MUI v4 with a custom theme.