带有打字稿 tsconfig 问题的 Material-UI

Question

我遇到了带有 typescript 配置的 material-ui 问题。我已经创建了自己的 webpack 配置。请检查 webpack 配置的参考。我正在尝试创建一个 Material-ui 可重用组件，我将在多个项目中使用该组件。

<块引用>

@babel@7.14.6 awesome-typescript-loader@5.2.1 webpack@5.41.0 反应@17.0.2

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const IgnorePlugin = require('webpack').IgnorePlugin;

module.exports = {
    entry: "./src/index.tsx",
    mode: "production",
    output: {
        filename: "index.js",
        path: __dirname + "/dist",
        libraryTarget: 'umd',
        globalObject: 'this'
    },
    devtool: "source-map",
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
    },
    module: {
        rules: [
            {
                test: /\.ts(x?)$/,
                loader: "awesome-typescript-loader",
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.svg$/,
                use: [
                    {
                        loader: 'svg-url-loader',
                        options: {
                            limit: 100000
                        }
                    }
                ]
            },
            {
                enforce: "pre",
                test: /\.js$/,
                loader: "source-map-loader"
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'reactlib.css'
        }),
        new IgnorePlugin({
            resourceRegExp: /^\.\/locale$/,
            contextRegExp: /esm-es5$/
        })
    ],
    externals: {
        "react": "react",
        "react-dom": "react-dom"
    }
}

这里，我附上了 tsconfig.json

{
    "compilerOptions": {
        "target": "ES5",
        "lib": [
            "DOM",
            "DOM.Iterable",
            "ESNext"
        ],
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "declaration": true,
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "ESNext",
        "moduleResolution": "node",
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react",
    },
    "exclude": [
        "node_modules"
      ],
    "include": ["./src/**/*", "./custom.d.ts"]
}

这里是 .babelrc 配置

{
    "presets": [
        "@babel/env",
        "@babel/react",
        "latest",
        "react",
        "stage-0"
    ],
    "plugins": [
        "@babel/plugin-proposal-export-default-from"
    ]
}

这就是我在尝试创建构建时面临的问题