如何使用material ui正确构建设计系统

Question

在我们公司，我们正在尝试将我们的设计系统构建为一个包，以便将其安装在我们的几个项目中。构建包工作正常，但是一旦我们安装它并从中导入某些内容，我们就会收到以下错误：

ERROR in ../design-system/dist/main.js 5:0-54
Module not found: Error: Can't resolve '@mui/material/Tab' in '/Users/***/***/minimal-example/frontends/design-system/dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/Tab' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

我已经成功创建了一个相当小的项目来重现该问题，您可以在这里找到它：https://github.com/antoniogamizbadger/minimal-example

要重现该问题，您只需克隆它并按照以下步骤操作：

来自

design-system

目录：

npm ci
npm run build

来自

package

目录：

npm ci
npm start

我们已经尝试了几种方法，但现在我们不知道为什么会发生这种情况。该错误消息表明了一些根本问题。尽管如此，我们已尝试修复它/研究错误，但没有找到任何解决方案。

知道我们应该更改什么配置才能使这个非常简单的用例发挥作用吗？

Answer 1

您的

design-system

包通过

"type": "module"

中的

package.json

声明它是 ESM 模块。

近年来，工具在强制符合规范方面变得更加严格。当你像这样导入时：

import TabMaterial  from '@mui/material/Tab'

它是单个文件而不是模块的导入，因此在 ESM 的规范中必须是：

import TabMaterial  from '@mui/material/Tab.js'

一般来说，尽管你不应该这样做。Mui 的内部文件结构是私有的并且容易改变。只需使用：

import { Tab as TabMaterial }from '@mui/material'

您无需担心这对捆绑包大小的影响。