无法使用 webpack 解析“fs"并做出反应 [英] Can't resolve 'fs' using webpack and react

问题描述

当我尝试为我的 Node 服务器构建应用程序时，我不断收到描述中的错误.

I keep getting the error in the description when I try to build my application for my Node server.

我最终试图读取 docxtemplater 的 .docx 文件，但如果没有 'fs' 工作，它看起来并不明亮.

I am ultimately trying to read a .docx file for docxtemplater, but without 'fs' working, it's not looking to bright.

我尝试使用 node:{fs:"empty"} 解决方法，我在许多解决方案中看到过，但是当我在浏览器上运行它时，它仍然给我同样的错误或传播到控制台.

I have tried to use the node:{fs:"empty"} workaround that I've seen on many solutions, but it's still giving me the same error or propagating up to the console when I am running it on the browser.

这是我在 webpack.config.js 中的内容:

Here is what I have in my webpack.config.js:

var path = require('path');
var webpack = require('webpack');
//var HtmlWebpackPlugin = require('html-webpack-plugin');
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');

const sourcePath = path.join(__dirname, './front_end');
const buildPath = path.join(__dirname, './src/bin');

module.exports = {
    devtool: 'source-map',
    //home directory for webpack must be absolute
    //context: sourcePath,
    //Application Execution and Webpack Bundling
    entry: {
        js: path.join(sourcePath, 'index.js')
        //html: './index.html',
    },
    output: {
        //Must be absolute path
        path: sourcePath,
        //publicPath: buildPath,
        //publicPath: path.join(__dirname, '/src/bin'),
        filename: "bundle.js"
    },

    resolve: {
        extensions: [
            '.webpack-loader.js',
            '.web-loader.js',
            '.loader.js',
            '.js',
            '.jsx'
        ],
        modules: [
            path.join(__dirname),
            "node_modules"
        ],
    },
    module: {
        rules: [
            {
                test: /.js$|.jsx$/,
                exclude: /node_modules/,
                use: [
                    "babel-loader",
                    "eslint-loader",
                ]
            },
            {
                test: /.html/,
                exclude: /node_modules/,
                use: [
                    "file-loader",
                ]
            },
            {
                test: /.css/,
                exclude: /node_modules/,
                use: [
                    "style-loader",
                    'css-loader'
                ]
            },
            {
                test: /.(gif|png)/,
                exclude: /node_modules/,
                use: [
                    "url-loader"
                ]
            }
        ],
        loaders: [
            {
                test: /.js$|.jsx$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2016', 'react']
                }
            },
            {
                test: /.css$/,
                loader: 'style-loader',
                use: ['style-loader', 'css-loader'],
                exclude: /node_modules/
            },
            {
                test: /.html$/,
                loader: "file?name=[name].[ext]"
            },
            {
                test: /.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'file?hash=sha512&digest=hex&name=[hash].[ext]',
                    'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
            }
        ]
    },
    plugins: [
     ],
    stats: {
        assets: true,
        colors: true,
        errors: true,
        errorDetails: true,
        hash: true,
    }
};

推荐答案

您不能在浏览器中使用 Node Core API 附带的任何模块，它们在那里不起作用.节点核心模块依赖于浏览器中不存在的 C/C++ 二进制文件.因此，您需要找到一种等效的方法来替换您的 React 应用程序中使用的任何 fs .

You can't use any modules that come with the Node Core API in the browser, they just won't work there. Node Core Modules rely on C/C++ binaries which won't be present in the browser. So you'll need to find an equivalent approach to replacing any fs use in your react app.

一种方法是通过 Node JS 后端通过 HTTP 将您要处理的文件提供给您的 React 应用程序.您可以在 Node 服务器中使用 fs 读取文件，并将该逻辑置于路由中，通过 HTTP 从 React App 调用该路由并将其流式传输回来.然后，您将在 React 应用程序中拥有文件数据，并可以根据需要使用它.

One approach would be to serve the file you want to work with over HTTP via a Node JS backend to your React app. You could read the file using fs in your Node server, and place that logic within a route, call that route from your React App via HTTP and stream it back. Then you will have the file data within your React App and can work with it as you need.

此 GitHub 存储库 列出了 Webpack 移植的节点核心库浏览器使用.不幸的是 fs 不是其中之一.

This GitHub repo has a listing of Node Core Libraries that Webpack has ported over for browser usage. Unfortunately fs isn't one of them.

这篇关于无法使用 webpack 解析“fs"并做出反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！