我正在尝试为我的react项目配置webpack。但是虽然它对其他包如sweetalert 2和所有包都工作得很好;它显示了react-easy-crop软件包的错误。
这是我的宝贝。

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "last 2 Chrome versions",
            "last 2 Firefox versions",
            "last 2 Safari versions",
            "last 2 iOS versions",
            "last 1 Android versions",
            "last 1 ChromeAndroid versions",
            "ie 11"
          ]
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    ["@babel/plugin-proposal-class-properties"],
    ["@babel/plugin-transform-runtime"],
    [
      "babel-plugin-import",
      {
        "libraryName": "@mui/material",
        "libraryDirectory": "",
        "camel2DashComponentName": false
      },
      "core"
    ],
    [
      "babel-plugin-import",
      {
        "libraryName": "@mui/icons-material",
        "libraryDirectory": "",
        "camel2DashComponentName": false
      },
      "icons"
    ],
    [
      "babel-plugin-import",
      {
        "libraryName": "react-easy-crop",
        "libraryDirectory": "",
        "camel2DashComponentName": false
      },
      "Cropper"
    ]
  ]
}

下面是我的webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const Dotenv = require('dotenv-webpack');

module.exports = {
  context: __dirname,
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
    publicPath: '/',
  },
  devServer: {
    historyApiFallback: true,
    port: 3000,
  },
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    fallback: {
      process: require.resolve('process/browser'),
      buffer: require.resolve('buffer'),
      http: require.resolve('stream-http'),
      https: require.resolve('https-browserify'),
      url: require.resolve('url/'),
      crypto: require.resolve('crypto-browserify'),
      stream: require.resolve('stream-browserify'),
    },
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|j?g|jpg|jpeg|svg|gif)?$/,
        use: 'file-loader?name=./assets/images/[name].[ext]',
      },
      {
        test: /\.(woff|woff2|ttf|eot)$/,
        use: 'file-loader',
      },
      {
        test: /@material-ui\/core\/.*/,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new Dotenv({
      path: './.env',
      safe: true,
      systemvars: true,
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public/index.html'),
      filename: 'index.html',
    }),
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
    }),
  ],
};

现在，当我尝试从react-easy-crop导入Cropper时，它显示了一个错误，即Uncatched ReferenceError：Cropper没有定义，我已经尝试卸载包，然后再次安装它与npm和纱;但是没用！