Не удается разрешить @ достичь / диалог

Question

Я разрабатываю приложение React с машинописью.Я пытаюсь импортировать @reach/dialog, но происходит сбой с ошибкой Module not found on its dependencies ( реакция-фокус-блокировка , реакция-удаление-прокрутка and проп-типы`).

Моя собственнаяскрипт компилируется.И некоторые другие библиотеки тоже компилируются, например react-simple-tree-menu.Но когда я пытаюсь импортировать @reach/dialog, происходит сбой из-за следующих ошибок:

ERROR in ./node_modules/react-focus-lock/dist/es2015/index.js
Module not found: Error: Can't resolve './MoveFocusInside' in '/Users/huang.ming.chang/Documents/feedback-widget/node_modules/react-focus-lock/dist/es2015'
 @ ./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

ERROR in ./node_modules/react-remove-scroll/dist/es2015/index.js
Module not found: Error: Can't resolve './component' in '/Users/huang.ming.chang/Documents/feedback-widget/node_modules/react-remove-scroll/dist/es2015'
 @ ./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

ERROR in ./node_modules/prop-types/index.js
Module not found: Error: Can't resolve './factoryWithTypeCheckers' in '/Users/huang.ming.chang/Documents/feedback-widget/node_modules/prop-types'
 @ ./node_modules/prop-types/index.js 14:19-55
 @ ./node_modules/@reach/dialog/es/index.js
 @ ./src/components/Modal.tsx
 @ ./src/index.tsx

Я также пытался изменить свой веб-пакет, чтобы импортировать только main вместо module (изменив `mainFields на['main']), так что он импортирует только формат es5.Однако его по-прежнему не удалось разрешить.

Я пытался использовать create-react-app для создания пустого приложения и импорта @reach/dialog, и он правильно собирается.Итак, по-видимому, моя конфигурация webpack устарела.

Мой 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]
};

Мой 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"]
}

Пожалуйста, помогите указать, где ясделал неправильно.Этот конфиг работает с некоторыми старыми пакетами, но для некоторых новых пакетов он всегда сталкивается с этой проблемой.

Как настроить веб-пакет так, чтобы он мог переносить код es6 из node_modules?

И почему мойWebpack не может разрешить код es5 в @reach/dialog?

Спасибо!