Module resolution with yarn / npm

Question

I am playing around with remix and mui v5. Using npm I get the following error when running npm run dev

Error: Directory import '.../playground/remix-mui-dev/node_modules/@mui/material/styles' is not supported resolving ES modules imported from .../playground/remix-mui-dev/build/index.js

I expected that this should work.

I have seen a lot of hints on the net what might be the problem. But then I tried yarn (4.1.1) with pnp resolution: No error

So I switched to yarn with node-modules: Same error as with npm.

I am not at all an expert in TS / frontend development and tooling. I would like to better understand what the interplay between the TS / JS module resolution and the package managers is. But lacking the knowledge, I do not really find the references on the net, that point me in the right direction.

I have created a repo with two branches (main=> npm and yarn for yarn)

Answer 1

it's because in some file theme.ts and theme-options.ts you import dependencies from @mui/material/styles and not from @mui/material

the index.js that export the needed function in the node module is in the root folder of @mui/material change the import like below sample to make run your application

import { ThemeOptions } from '@mui/material';