我正在使用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配置.