NPM packages for React webpart SharePoint Online try to access 'fs' on client side but it's not even necessary? React SPFX

Question

While there is a correct answer already given at:

SPFx Unable to use 'fs' module

its missing the part that in webpack config it can be outflagged like this:

node: { fs: 'empty' },

Module not found: Error: Can't resolve 'fs'

But I cannot find such a config file in a SPFx react web-part structure or does it has something to do with gulp configuration?

EDIT

I am trying to write state data of an react application into an excel-sheet. Therefore I used already react-csv which seems to be like the name says simply comma separated so its not really readable with big data, react-export-excel and considered using .xlsx.

While using react-export-excel I recognized that it is already using the .xlsx package as an dependency. Those packages try to use fs for writing data into an excel-sheet. I know that it should be handled in the back-end but SharePoint online won't let me do this.

Here is the error code:

[06:49:00] Error - [webpack] 'dist': ./node_modules/react-export-excel/node_modules/xlsx/xlsx.js Module not found: Error: Can't resolve 'fs' in 'C:\Projects.........\node_modules\react-export-excel\node_modules\xlsx'

looking for modules in C:\Projects.........\node_modules\react-export-excel\node_modules using description file: C:\Projects.........\node_modules\react-export-excel\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration

I hope I mentioned everything that is necessary.

EDIT II

It seems no one looked up the GitHub link because everyone is telling me that fs on clientside isn't working. While this is (OBVIOUSLY) true not all packages HAVE TO use 'fs' wether it is implemented or not. Excel reports are just MORE COMMON to be handled in backend AND THATS WHY most packages use 'fs' as an dependandy. THIS IS NOT necessary because the browser offers natives APIs to do similar but more simple things. So there has to be a way in SPFx like in normal React projects to tell webpack or gulp "DONT USE fs as an dependancy" with something like:

node: { fs: 'empty' },

and it will use the BROWSER API instead.

Answer was given by michaelcuneo: "It's irrelevant and your project will run perfectly fine without it. fs is for an underlying feature of exceljs and many other nodeJS modules that don't work inside a React.JS App. If you need to make the error go away because you're sick of looking at it... Go to webpack.base.babel.js inside /internals/webpack ... And add somewhere close to the bottom... mines directly above devtool: options.devtool ... node: { fs: 'empty' }, This will cause the webpack to ignore fs dependencies."

This should be doable in a SPFx project too!!!

I hope people will understand me better now.

Answer 1

You are not able to modify the actual webpack configuration file that is provided ootb by the spfx tools. But they have made it possible to add your own loaders. Take a look at this post by the spfx team. Extending Webpack

Unfortunately the thing you want to do is not possible as i understand it. As the question you are refering to states that this functionality "fs" is only available runtime in node.js and not in webparts that run in the browser because it does not get bundled into the webpart code.

The fs module is a part of Node.js and is not available inside web parts. You could use it in custom Gulp tasks but not inside web parts. On runtime web parts run in web browser and not on top of the Node.js runtime which would explain the error that you're getting. Waldek's answer

So even if you like it or not this is not possible in the current configuration.

UPDATE: One way to go around this issue is to create an api or Azure function that takes in the file or data that you want to convert to a excel file and the return that file as a download. Stack overflow answer

Answer 2

I managed to fix this error by adding the following to the gulpfile.js:

build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfiguration) => {
    generatedConfiguration.node = { fs: "empty" };

    return generatedConfiguration;
  }
});

Answer 3

I dont know if its too late. I came accross this issue trying to make react-data-export working with SPFx. Here how I fixed the issue following https://docs.microsoft.com/en-us/sharepoint/dev/spfx/toolchain/extending-webpack-in-build-pipeline.

I am new to SharePoint Dev so if someone thinks its bad let me know :) My gulp.js file:

"use strict";

const build = require("@microsoft/sp-build-web");

build.addSuppression(
  `Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`
);

build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfiguration) => {
    generatedConfiguration = {
      ...generatedConfiguration,
      node: { fs: "empty" },
    };
    return generatedConfiguration;
  },
});

build.initialize(require("gulp"));