При попытке прочитать файл в реагирующем приложении с помощью веб-пакета Uncaught TypeError: fs__WEBPACK_IMPORTED_MODULE_16___default.a.readFile не является функцией

Я пытаюсь использовать fs в своем приложении для реагирования, чтобы прочитать файл из моего локального файла. Код выглядит следующим образом: я использую атрибуты target и node, как это предлагается в других статьях, но все равно получаю ошибку типа. Можем ли мы использовать fs в реагирующем приложении с веб-пакетом? Мысли?

import fs from 'fs';

    fs.readFile(
          "manifest.zip",
          (err, data) => {
            if (err) throw err;
            JSZip.loadAsync(data).then(zip => {
              console.log("data");         
            });
          }
        );

Мой веб-пакет выглядит так, я использую атрибуты target и node, как предлагается здесь https://github.com/pugjs/pug-loader/issues/8

 module.exports = {
  target : "node",
  node: {
    fs: "empty"
  },
  entry: {
    app: "./src/index.tsx",
    libs: ["react", "react-dom", "validator"]
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: "awesome-typescript-loader",
            options: {
              useBabel: true
            }
          }
        ]
      },
      {
        test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              outputPath: "hashed/"
            }
          }
        ]
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },
  plugins: [
    new CleanWebpackPlugin(["dist", "lib"]),
    new HtmlWebpackPlugin({
      title: "App Configuration",
      template: "public/index.ejs",      
      filename: "appconfiguration.html"
    })
  ],
  output: {
    filename: "hashed/[name].[hash].js",
    path: path.resolve(__dirname, "dist")
  },
  optimization: {
    splitChunks: {
      chunks: "all"
    }
  }
};

person Deepak Kothari    schedule 11.03.2020    source источник