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

我还尝试将Webpack修改为仅导入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"]
}

请帮助指出我做错了什么。此配置适用于某些旧软件包，但是对于某些新软件包，它总是会遇到此问题。

如何配置webpack，使其可以从node_modules转换es6代码？

为什么我的webpack无法解析@reach/dialog中的es5代码？

谢谢！

无法解决@ reach / dialog

0 个答案: