构建设计系统包时材质样式无法正确加载

Question

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

ERROR in ./node_modules/design-system/dist/esm/index.js 4:0-51
Module not found: Error: Can't resolve '@mui/material/styles' in '/Users/***/***/minimal-example/frontends/drupe-mo/node_modules/design-system/dist/esm'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/styles' 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
# this is to avoid a symlink being created
rm -rf node_modules/design-system &&  npm install --install-links ../design-system

我们已经尝试了几种方法，但现在我们不知道为什么会发生这种情况。该错误消息表明了一些根本问题。尽管如此，我们已尝试修复/研究错误，但没有找到任何解决方案。几天前我问了一个非常类似的问题，但是在这种情况下使用相同的答案是行不通的。

旁注：我们正在使用 Rollup 来构建设计系统包，并且导入组件工作正常。当我们从构建的包中导入主题时，我们就开始遇到这个问题。

知道我们应该更改什么配置才能使其工作吗？

更新

更改导入来源

import { createTheme } from '@mui/material/styles';

至：

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

并没有解决问题。

Answer 1

我发现在尝试捆绑定制的 MUI 组件时，我需要使用汇总插件管道，直到它按预期工作..

附加工作

rollup.config.js

（与 MUI 配合使用）和

tsconfig.json

//rollup.config.js
import commonjs   from "@rollup/plugin-commonjs";
import resolve    from "@rollup/plugin-node-resolve";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import typescript from "@rollup/plugin-typescript";
import postcss    from "rollup-plugin-postcss";
import url        from '@rollup/plugin-url'
import svgr       from '@svgr/rollup'
import dts        from 'rollup-plugin-dts'

import packageJson from "./package.json";

// eslint-disable-next-line import/no-anonymous-default-export
export default [{
  input: "./src/index.ts",
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: true
    },
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: true
    }
  ],
  plugins: [
    peerDepsExternal(),
    resolve(), 
    commonjs(), 
    typescript(),
    postcss(),
    url(),
    svgr(),
  ]
},
{
  input: './build/dts/index.d.ts',
  output: [{ file: 'build/index.d.ts', format: 'es' }],
  plugins: [dts()],
}
];
**strong text**

//rollup.config.js
{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "es6",
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true ,

      // enabling declaration (.d.ts) emit
    "declaration": true,
    // optional - in general it's a good practice to decouple declaration files from your actual transpiled JavaScript files
   "declarationDir": "build/dts",
   // optional if you're using babel to transpile TS -> JS
   "emitDeclarationOnly": true
  },
  "include": [
    "src"
  ],
  "exclude": ["node_modules","build"]
}