0

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.

| improve this question | | | | |
  • Can you please add the more details to your question? What exactly you are trying to achieve using node: { fs: 'empty' }? Is there any error in your webpart when you run gulp serve? If Yes, can you please add an error you are getting to your question? There might be different solution to your error. – Ganesh Sanap Nov 13 '19 at 9:30
  • @GaneshSanap Do I just edit my Question above adding those parts you mentioned? – shibo Nov 13 '19 at 10:58
  • Yes, you can edit your question and add those details. – Ganesh Sanap Nov 13 '19 at 11:01
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

| improve this answer | | | | |
  • Thanks for your quick answer! But in the GitHub article the one asking the question trys to achieve nearly the same just with JSON and not state-data and michaelcuneo mentions in his answer that he doesn't need that for his demand and it will work still fine. For example I have table filled with state-data and want to write this data in an excel-sheet (everything clientside). – shibo Nov 13 '19 at 11:35
  • If you look further down in the github issue thread im thinking you are refering to there is a possible solution. stackoverflow.com/questions/51694902/… – Johan Brännmar Nov 13 '19 at 11:43
  • See my updated answer. – Johan Brännmar Nov 13 '19 at 11:47
  • Thanks alot but i knew already that I need backend logic like NodeJS or AZ functions. But michaelcuneo mentioned in his answer that 'fs' isn't even necessary. My thought about this is that browsers accept the native API for simple downloads and uploads. This is proven by the fact, that react-csv is working. I think csv is accepted because you cant inject malicious code in a csv file. The same maybe true for excel files with .xlsx. Maybe its just more convenient to use the FileSystem core module 'fs' of NodeJS to do it in NodeJS. So if it's possible to "outflag" it like mentioned it could work – shibo Nov 13 '19 at 13:01
  • 1
    +1 - Browsers are unable to access the client file system anyway so the fs module would not work no matter how you try to hack it. – Derek Gusoff Nov 13 '19 at 17:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.