Cannot find module '@emotion/react/types/jsx-namespace' errors during yarn typecheck

[ngquocvu]

Environment:

• Yarn version: v1.22.22
• TypeScript version: 5.0.4
• Operating System: Windows 11
• The project is newly initialized from npx @commercetools-frontend/create-mc-app@latest \ my-new-custom-application-project \ --template starter command

Description:
When attempting to run yarn typecheck command, encountering multiple TypeScript errors related to not being able to find module '@emotion/react/types/jsx-namespace' across various files.

Steps to Reproduce:

1. Navigate to the project directory.
2. Run the command yarn typecheck.

Expected Result:
TypeScript should successfully type-check without any errors.

Actual Result:
TypeScript fails with the error "TS2307: Cannot find module '@emotion/react/types/jsx-namespace'" repeatedly across several files.

Affected Files:

     1  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/custom-views/custom-view-loader/custom-view-loader.d.ts:7
     1  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/custom-views/custom-views-selector/index.d.ts:2    
     5  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/detail-pages/custom-form-detail-page/custom-form-detail-page.d.ts:47
     2  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/detail-pages/form-detail-page/form-detail-page.d.ts:83
     2  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/detail-pages/info-detail-page/info-detail-page.d.ts:39
     5  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/detail-pages/tabular-detail-page/tabular-detail-page.d.ts:52
     2  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/dialogs/confirmation-dialog/confirmation-dialog.d.ts:30
     2  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/dialogs/form-dialog/form-dialog.d.ts:32
     2  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/dialogs/info-dialog/info-dialog.d.ts:13
     3  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/drawer/drawer.d.ts:38
     5  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/main-pages/custom-form-main-page/custom-form-main-page.d.ts:38
     2  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/main-pages/form-main-page/form-main-page.d.ts:75   
     2  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/main-pages/info-main-page/info-main-page.d.ts:25   
     5  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/main-pages/tabular-main-page/tabular-main-page.d.ts:38
     1  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/maintenance-page-layout/maintenance-page-layout.d.ts:12
     4  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/modal-pages/custom-form-modal-page/custom-form-modal-page.d.ts:37
     1  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/modal-pages/form-modal-page/form-modal-page.d.ts:49
     1  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/modal-pages/info-modal-page/info-modal-page.d.ts:35
     4  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/modal-pages/tabular-modal-page/tabular-modal-page.d.ts:40
     2  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/modal-pages/utils/modal-page-top-bar.d.ts:7        
     1  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/page-content-containers/page-content-full/page-content-full.d.ts:5
     1  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/page-content-containers/page-content-narrow/page-content-narrow.d.ts:5
     1  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/page-content-containers/page-content-wide/page-content-wide.d.ts:8
     1  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/page-not-found/page-not-found.d.ts:2
     1  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/page-unauthorized/page-unauthorized.d.ts:2
     4  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/project-stamp/project-stamp.d.ts:2
     1  node_modules/@commercetools-frontend/application-components/dist/declarations/src/components/tab-header/tab-header.d.ts:33
     2  node_modules/@commercetools-frontend/application-shell-connectors/dist/declarations/src/components/application-context/application-context.d.ts:96
     1  node_modules/@commercetools-frontend/application-shell-connectors/dist/declarations/src/components/custom-view-context/custom-view-context.d.ts:15
     3  node_modules/@commercetools-frontend/application-shell-connectors/dist/declarations/src/components/project-extension-image-regex/project-extension-image-regex.d.ts:26
     1  node_modules/@commercetools-frontend/application-shell/dist/declarations/src/components/application-shell-provider/application-shell-provider.d.ts:14
     1  node_modules/@commercetools-frontend/application-shell/dist/declarations/src/components/application-shell/application-shell.d.ts:41
     1  node_modules/@commercetools-frontend/application-shell/dist/declarations/src/components/configure-intl-provider/configure-intl-provider.d.ts:9  
     1  node_modules/@commercetools-frontend/application-shell/dist/declarations/src/components/custom-view-shell/custom-view-shell.d.ts:11
     1  node_modules/@commercetools-frontend/application-shell/dist/declarations/src/components/error-apologizer/index.d.ts:3
     1  node_modules/@commercetools-frontend/application-shell/dist/declarations/src/components/fetch-user/fetch-user.d.ts:13
     1  node_modules/@commercetools-frontend/application-shell/dist/declarations/src/components/inject-reducers/inject-reducers.d.ts:10
     1  node_modules/@commercetools-frontend/application-shell/dist/declarations/src/components/redirect-to-logout/index.d.ts:4
     1  node_modules/@commercetools-frontend/application-shell/dist/declarations/src/components/route-catch-all/index.d.ts:2
     1  node_modules/@commercetools-frontend/application-shell/dist/declarations/src/components/setup-flop-flip-provider/setup-flop-flip-provider.d.ts:14
     1  node_modules/@commercetools-frontend/application-shell/dist/declarations/src/components/suspended-route/suspended-route.d.ts:3
     1  node_modules/@commercetools-frontend/i18n/dist/declarations/src/async-locale-data/async-locale-data.d.ts:21
     1  node_modules/@commercetools-frontend/react-notifications/dist/declarations/src/components/notification/notification.d.ts:11
     1  node_modules/@commercetools-frontend/react-notifications/dist/declarations/src/components/notifications-list/notifications-list.d.ts:6

Priority: High (blocking development)
Type: Bug/Error

Please investigate and resolve the issue. Thank you!

[emmenko]

Hi 👋
Thanks for reporting the issue. We are aware of it and are working on a fix.

In the meantime you can try pinning the @emotion/react and @emotion/styled dependencies to version 11.13.5 (using the resolution field).