Next.JS v13.1.1 - Dev compile times are very long

[Tigatok]

Verify canary release

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

Provide environment information

yarn next info yarn run v1.22.19 $ ///node_modules/.bin/next info

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Wed Nov 23 01:01:46 UTC 2022
Binaries:
  Node: 18.9.1
  npm: 8.19.1
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 13.1.1
  eslint-config-next: 13.1.1
  react: 18.2.0
  react-dom: 18.2.0

Done in 2.03s.

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

No response

Link to the code that reproduces this issue

https://codesandbox.io/s/upbeat-lake-tsq3ir?file=/app/list/page.tsx

To Reproduce

I used the yarn create next-app --experimental-app command to begin our new version of a project. My dependencies list includes the following:

    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/icons-material": "^5.11.0",
    "@mui/material": "^5.11.2",
    "@next/font": "13.1.1",
    "@types/node": "18.11.18",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.10",
    "eslint": "8.30.0",
    "eslint-config-next": "13.1.1",
    "next": "^13.1.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "socket.io-client": "^4.5.4",
    "typescript": "4.9.4"

Upon running yarn dev, I am experiencing insane long compile times.

Describe the Bug

After running yarn dev I am experiencing a compile time of around 33.2s. It says it is compiling 23214 modules.

yarn run v1.22.19
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /home////.env
warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback

event - compiled client and server successfully in 581 ms (236 modules)
wait  - compiling /page (client and server)...
event - compiled client and server successfully in 33.2s (23214 modules)

It would appear that there is still a delay (>1s) when loading basic page types as well. Attached is a picture of a network tab.

My code is pretty straightforward. The only caveat I can see is that I am using the useRouter() hook. I am using this because NextJS 13 does not support Material UI components. Therefore, I have told my NavBar component to use client, pushing them to my new settings/page.tsx and list/page.tsx.

Expected Behavior

Seems like something is going wrong during compile. Whenever I am making a change to the client code, and the fast-refresh executes, I am waiting ~15 seconds to see the changes.

Which browser are you using? (if relevant)

Version 108.0.5359.125 (Official Build) (64-bit)

How are you deploying your application? (if relevant)

yarn dev (using create next app)

[ibrahim-ahmed-dev]

Just throwing this out there but typescript, types, eslint - is it safe to move these to the devDependencies section?

[Tigatok]

@supastore Ah yeah, sorry I saw that and removed those, but didn't clean up the git post. All deps are moved to non-dev if they should be!

Thanks!

[mellowjay]

Try updating your next.config.js file to this.

const path = require('path')

/** @type {import('next').NextConfig} */
module.exports = {
    reactStrictMode: true,
    experimental: {
        appDir: true,
    },
    compiler: {
        styledComponents: true,
    },
    sassOptions: {
        includePaths: [path.join(__dirname, 'styles')],
    },
    modularizeImports: {
        '@mui/icons-material': {
            transform: '@mui/icons-material/{{member}}',
        },
        '@mui/material': {
            transform: '@mui/material/{{member}}',
        }
    }
}

[Tigatok]

That makes things like this, fail for some reason.

./app/State/StateIcon.tsx:10:0 Module not found: Can't resolve '@mui/material/createTheme' 8 | } from "@mui/icons-material"; 9 | import { green, red, blue, orange } from "@mui/material/colors";

10 | import { Avatar, createTheme, ThemeProvider } from "@mui/material";

[samcx]

Hi @Tigatok! This shouldn't be the case anymore.

In the meantime, I will be closing this issue. If this slow dev compile time is still an issue, please feel free create a new bug report.

[github-actions[bot]]

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