webpack 错误：找不到模块。当使用我的其他由 rollup 捆绑的库时

Question

我正在使用 rollup 来捆绑一个 ui 库（在几个主要应用程序中使用它）。 但在捆绑的 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';

这是我的 rollup.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],
  },
];

这是我由 create-react-app 创建的 webpack 配置：

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

这些是我的错误：

找不到模块：错误：无法解析“path-to-base/my-app/node_modules/ui-lib/dist/esm”中的“@mui/icons-material/index” 您是指“index.js”吗？
重大更改：请求“@mui/icons-material/index”无法解析，只是因为它已按照完全指定的方式解析 （可能是因为起源是严格的 EcmaScript 模块，例如具有 javascript mimetype 的模块、“.mjs”文件或“.js”文件，其中 package.json 包含““type”：“module””）。
请求中的扩展名是必需的，以便完整指定。
将扩展添加到请求中。

我无法在 webpack 配置或 rollup 配置中找到解决此问题的方法。

Answer 1

尝试这个配置https://webpack.js.org/configuration/module/#resolvefullyspecified.

启用后，当最近的父 package.json 文件包含值为“module”的“type”字段时，在 .mjs 文件或任何其他 .js 文件中导入模块时，您应该提供文件扩展名，否则 webpack 将失败编译时出现“找不到模块”错误。