0

import { makeStyles } from '@material-ui/core/styles' hits the following error:

- info Collecting page data ..Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/usr/src/sellerportal/node_modules/@material-ui/core/styles' is not supported resolving ES modules imported from /usr/src/sellerportal/node_modules/@myorg/mylib/build/index.js
Did you mean to import @material-ui/core/styles/index.js?
    at new NodeError (node:internal/errors:399:5)
    at finalizeResolution (node:internal/modules/esm/resolve:224:17)
    at moduleResolve (node:internal/modules/esm/resolve:850:10)
    at ESMLoader.defaultResolve (node:internal/modules/esm/resolve:1058:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:323:32)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:172:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///usr/src/sellerportal/node_modules/@material-ui/core/styles'
}
unhandledRejection Error: Failed to collect page data for /_error
    at /usr/src/sellerportal/node_modules/next/dist/build/utils.js:1152:15 {
  type: 'Error'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Node v19.8.1

"@mui/material": "^5.13.1",
"@mui/styles": "^5.13.1",
Kok How Teh
  • 3,298
  • 6
  • 47
  • 85

1 Answers1

0

By the looks of it, you are trying to import makeStyles from @material-ui which is v4 of MUI. And as you stated your dependecies you have @mui/material which is v5 of MUI. You just need to import the makeStyles from the currently installed version of MUI.

import { makeStyles } from '@mui/material'

NOTE: This styling solution is LEGACY in MUI v5, see the docs below.
@mui/styles (LEGACY)

Dobromir Kirov
  • 934
  • 4
  • 16