React Js require 'fs'

Question

I have

import fs from 'fs'

and in my package.json I have

Then I run the command

>  npm i fs
>  [email protected] node_modules/fs

next in my React store I import 'fs' module

import fs from 'fs'

However when I try to use fs

I don't see methods except for constructor and a few other __methods. I don't see the method createReadStream or any other file manipulation methods.

Does anybody know what is wrong? (using Webpack) and can give more information upon request, but I am getting this far...

ps: why is it that I can npm i fs --save when I read on other posts that I do not have to do that (using node 5.5.0)

import Reflux from 'reflux'
import AddItemActions from '../actions/AddItemActions'
import request from  'superagent-bluebird-promise'
import fs from 'fs'

var ImageStore = Reflux.createStore({
  init(){
    .
    .
    .
  },

  decryptImage(file) {
    var reader = new FileReader();
    var info = {}
    reader.onload = (output) => {
      debugger
      request.post("https://camfind.p.mashape.com/image_requests")
        .set("X-Mashape-Key", "KEY")
        .set("Content-Type", "application/x-www-form-urlencoded")
        .set("Accept", "application/json")
        .send({'focus': { 'x': 480}})
        .send({'focus': { 'y': 640}})
        .send({'image_request': {'altitude': 27.912109375}})
        .send({'image_request': {'language': "en"}})
        .send({'image_request': {'latitude': 35.8714220766008}})
        .send({'image_request': {'locale' : "en_US"}})
        .send({'image_request': {'longitude': 14.3583203002251}})
        .send({'image_request': {'image': fs.createReadStream("/path" + 'file.jpg')}})
        .then(function (result) {
          console.log(result.status, result.headers, result.body);
          this.info = result
        },
          function(error) {
            console.log(error);
        })
    }

    reader.readAsDataURL(file);
    return info
  },
  .
  .
  .
  .
})

Gilgai

Possible dupe of #24595296. fs is part of node core modules. – Hill

What are you expecting to happen here? fs is a node module that works with the file system. Most of its methods won't work in a browser. – Drought

Oh, I see.... i thought I could include any node package in my react app... so is there an equivalent for Javascript? – Gilgai

The browser doesn't allow access to the file system. What are you trying to achieve? – Lilias

The function decryptImage. There is a parameter image_request[image] that takes a file stream. I would like to send that via my react is app – Gilgai

Possible duplicate of node.js npm install fs error – Furore

This can be useful if you're running tests, which are not in the browser and want to load mocks from a filesystem – Dissepiment

Answer 1

In create-react-app they have stubbed out 'fs'. You cannot import it. They did this because fs is a node core module.
You'll have to find another solution to that problem. See this ticket.

Waterspout

Not a viable solution. Literally the answer is "Do SSR".... Are there any packages that can be used or no packages for React? – Valve

Answer 2

It's possible this might be an environment issue. It's not possible for the browser to interpret and run some Node server-side modules like fs.

The solution is to run the fs methods in a Node environment (server-side) or to find a package which offers the same functionality but written for the browser.

It's discussed in this question... Module not found: Error: Cannot resolve module 'fs'

And this question... Use fs module in React.js,node.js, webpack, babel,express

Vallejo

Here is a great thread about integrating fs functionality client-side. #46468358 – Vallejo

Answer 3

Dropped in here had an issue with fs, had to download file in docx. Reason for this is it's a node package not react, To fix i switched to file saver package and it works fine for my requirement, replaced toBuffer with toBlob and fs with saveAs, example code below.

//with fs
Packer.toBuffer(doc).then((buffer) => {
  fs.writeFileSync("My Document.docx", buffer);
});

//with file saver
Packer.toBlob(doc).then(blob => {
  console.log(blob)
  saveAs(blob, 'MyDocument.docx')
})

you can know more about file saver here. https://www.npmjs.com/package/file-saver

Lelialelith

Answer 4

You can use the package universal-fs which allows you to use core Node:fs functions on the clientside.

Full disclosure I am the creator of this package.

Sacchariferous

Answer 5

npm i babel-plugin-preval

Though browser does not allow accessing file system during runtime, You can use prevail in React to read content from file system into memory during build time like so

// loading content of text file into react project during build time.
// which means everytime text content is changed, you need to rebuild the project to get the updated content.
const greetingContent = preval`
  const fs = require('fs')
  module.exports = fs.readFileSync(require.resolve('./greeting.txt'), 'utf8')
`
console.log(greetingContent);

Woman