Typescript Can'；t解析@reach/dialog

我正在开发一个带有typescript的React应用程序。我尝试导入

@reach/dialog

，但由于在其依赖项上未找到

模块

错误

（

react focus lock

，

react remove scroll

和

prop types`）而失败

我自己编写的脚本。还有一些其他库也可以编译，例如

react simple tree menu

。但当我尝试导入

@reach/dialog

时，它会出现以下错误：

./node_modules/react focus lock/dist/es2015/index.js中的

错误
未找到模块：错误：无法解析“/Users/huang.ming.chang/Documents/feedback widget/node_modules/react focus lock/dist/es2015”中的“/MoveFocusInside”
@./node_modules/react focus lock/dist/es2015/index.js 3:0-48 6:0-75
@./node_modules/@reach/dialog/es/index.js
@./src/components/Modal.tsx
@./src/index.tsx
./node_modules/react remove scroll/dist/es2015/index.js中出错
未找到模块：错误：无法解析“/Users/huang.ming.chang/Documents/feedback widget/node_modules/react remove scroll/dist/es2015”中的“/component”
@./node_modules/react remove scroll/dist/es2015/index.js 1:0-43 2:0-25
@./node_modules/@reach/dialog/es/index.js
@./src/components/Modal.tsx
@./src/index.tsx
./node_modules/prop types/index.js中出错
未找到模块：错误：无法解析“/Users/huang.ming.chang/Documents/feedback widget/node_modules/prop types”中的“/factoryWithTypeCheckers”
@./node_模块/道具类型/index.js 14:19-55
@./node_modules/@reach/dialog/es/index.js
@./src/components/Modal.tsx
@./src/index.tsx

我还尝试将我的网页修改为只导入

main

，而不是

module

（通过将'mainFields'更改为['main']），以便它只导入es5格式。然而，它仍然未能解决

我尝试使用

createreact-app

创建一个空白应用程序，并导入

@reach/dialog

，它构建正确。显然我的网页配置已经过时了

我的

webpack.config.js

如下所示

module.exports = {
    mode: isDev ? MODES.DEV : MODES.PROD,
    target: "web",
    devtool: isDev ? "eval-source-map" : false,
    entry: './index.tsx',
    output: {
        path: './dist'
        filename: `main.js`,
        libraryTarget: "umd"
    },

    module: {
        rules: [
            {
                test: /\.(js|jsx|ts|tsx)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader"
                    },
                    {
                        loader: "ts-loader"
                    }
                ]
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            config: {
                                path: paths.confDir
                            }
                        }
                    },
                    "sass-loader"
                ]
            },
            {
                test: /\.(gif|png|jpe?g|svg)$/i,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: `[name].[ext]`,
                            outputPath: `${widgetUIDir}/images`
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        extensions: ["js", "jsx", ".ts", ".tsx"],
        modules: ["node_modules"]
    },
    externals: ["react", "react-dom"],
    plugins: [...some plugins]
};

My

ts.config.json

{
    "compilerOptions": {
        "allowJs": true,
        "module": "es6",
        "target": "es5",
        "jsx": "react",
        "outDir": "./dist/",
        "lib": ["es6", "dom", "es2017"],
        "moduleResolution": "node",
        "preserveConstEnums": true,
        "skipLibCheck": true,
        "strictNullChecks": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noImplicitAny": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true
    },
    "include": ["**/*.ts", "**/*.tsx"],
    "exclude": ["node_modules"]
}

请帮我指出我哪里做错了。此配置可用于某些旧包，但对于某些新包，它总是遇到此问题

如何配置webpack，使其能够从

节点\u模块

传输es6代码

为什么我的网页无法解析

@reach/dialog

中的es5代码

谢谢