yarn / npm 的模块解析

Question

我正在玩 remix 和 mui v5。 使用 npm 运行时出现以下错误

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

我预计这应该有效。

我在网上看到很多提示可能是什么问题。 但后来我尝试了具有 pnp 分辨率的纱线（4.1.1）：没有错误

所以我切换到带有节点模块的yarn：与npm相同的错误。

我根本不是 TS/前端开发和工具方面的专家。 我想更好地了解 TS / JS 模块解析和包管理器之间的相互作用是什么。 但由于缺乏知识，我并没有真正在网上找到可以为我指明正确方向的参考资料。

我创建了一个repo，有两个分支（main => npm 和yarn for yarn）

Answer 1

这是因为在某些文件

theme.ts

和

theme-options.ts

中，您从

@mui/material/styles

而不是从

@mui/material

导入依赖项

在节点模块中导出所需功能的

index.js

位于@mui/material的根文件夹中，像下面的示例一样更改导入以运行您的应用程序

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