Canary version breaks @mui/material based project

[weyert]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.15.0
      npm: 7.24.2
      Yarn: 1.22.19
      pnpm: 7.30.3
    Relevant packages:
      next: 13.4.8-canary.5
      eslint-config-next: 12.3.4
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.2

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

n/a

To Reproduce

Create a project which uses @mui/material e.g. a component like below, with the dependencies:

• "@mui/material": "^5.10.15",

/* eslint-disable react/no-unstable-nested-components */
import { Box, useMediaQuery, useTheme } from '@mui/material'
import React, { PropsWithChildren } from 'react'

export function PageLayout({ children }: PropsWithChildren<{}>) {
  const theme = useTheme()
  const isSmUp = useMediaQuery(theme.breakpoints.up('sm'))

  return (
    <>
      <Box
        sx={
          isSmUp
            ? {
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
              }
            : {
                display: 'flex',
                flexDirection: 'column',
                flex: 1,
                alignItems: 'center',
                backgroundColor: 'common.white',
              }
        }
      >
        {children}
      </Box>
    </>
  )
}

Describe the Bug

When you upgrade to the canary version and have an existing project that uses @material/ui the build step breaks with the following error:

./src/Layouts/PageLayout.tsx
Module not found: Can't resolve '@mui/material/useTheme'

https://nextjs.org/docs/messages/module-not-found

Expected Behavior

Able to compile existing code without new build errors

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[Haseebshah936]

They are fixing the overall app router. If you want to still develop using app router than you can go with ^13.3

[weyert]

I am not using the app router yet. Just good old pages router

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.