我正在使用rollupBundle 一个ui库(在几个主要的应用程序中使用它). 但在Bundle 的esm文件中,我有这些导入,这是不接受的webpack在主要应用程序:

import { ArrowDropDownCircleOutlined } from '@mui/icons-material/index';
import '@mui/material/CircularProgress';
import '@mui/icons-material/HighlightOff';
import Autocomplete from '@mui/material/Autocomplete';
import Paper from '@mui/material/Paper';
import { grey } from '@mui/material/colors';

这是我的Rolup.config文件:

import { nodeResolve } from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import replace from "@rollup/plugin-replace";
import { dts } from "rollup-plugin-dts";

import packageJson from "./package.json";

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true,
      },
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      nodeResolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
      replace({
        "process.env.NODE_ENV": JSON.stringify("production"),
      }),
    ],
    external: [...Object.keys(packageJson.peerDependencies), "tss-react/mui", 'tss-react/mui', /@mui/],
  },
  {
    input: "src/index.ts",
    output: [{ file: "dist/index.d.ts", format: "es" }],
    plugins: [dts],
  },
];

这是我的webpack配置,由react—app创建:

module.exports = {
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                },
                resolve: {
                  fullySpecified: false,
                }
            }
        ],
    }
}

这些是我犯的错误:

Module not found: Error: Can't resolve '@mui/icons-material/index' in 'path-to-base/my-app/node_modules/ui-lib/dist/esm' Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/icons-material/index' 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.

我找不到一种方法来解决这个问题,在webpack配置,或在rollup配置.

推荐答案

我们在webpack4中遇到了问题,当你使用像这样的导入风格时,

import { ArrowDropDownCircleOutlined } from '@mui/icons-material/index';

我们必须重写我们所有的mui图标导入,

import ArrowDropDownCircleOutlined from '@mui/icons-material/ArrowDropDownCircleOutlined';

但这似乎是esm导入的问题.我为esm找到了这个解决方案

{
  test: /\.m?js/,
  resolve: {
    fullySpecified: false,
  },
}

因为react脚本里有个bug.这里的问题—https://github.com/facebook/create-react-app/issues/11865

Typescript相关问答推荐

类型是工作.但它失go 了正确变体的亮点..为什么?或者如何增强?

根据另一个成员推断类成员的类型

无法正确推断嵌套泛型?

如何在TypeScrip中正确键入元素和事件目标?

限制返回联合的TS函数的返回类型

从对象类型描述生成类型

声明文件中的类型继承

RXJS将对键盘/鼠标点击组合做出react

类型脚本-在调用期间解析函数参数类型

带投掷的收窄类型

在Reaction中折叠手风琴

使用Type脚本更新对象属性

错误TS7030:并非所有代码路径都返回值.";由tsfig.json中的";Strong";:False引起

打字脚本错误:`不扩展[Type]`,而不是直接使用`[Type]`

如何在TypeScript类成员函数中使用筛选后的keyof this?

如何使用 Angular 确定给定值是否与应用程序中特定单选按钮的值匹配?

如何将 MUI 主题对象的自定义属性与情感样式组件中的自定义props 一起使用?

TS2532:对象可能未定义

递归类型名称

如何编写一个接受 (string|number|null|undefined) 但只返回 string 且可能返回 null|undefined 的函数?