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

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

0 голосов
/ 11 марта 2020

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

import fs from 'fs';

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

Мой веб-пакет выглядит следующим образом, я использую атрибуты цели и узла, как предлагается здесь 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"
    }
  }
};
...