无法使用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 App中拥有文件数据，并可以根据需要使用它.

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已移植到的Node Core库的列表.供浏览器使用.不幸的是 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屋！