CODEWITHSUNDEEP
reactjstypescriptfs
Gabriel Marcondes
Gabriel Marcondes

Reputation: 1010

Object doesn't support property or method 'readFile' (node: fs)

TypeError: Object doesn't support property or method 'readFile'

I've just created a brand new react app, but this is happening... I don't know what else I can do.

import * as React from "react";
import * as fs from "fs";
import * as zlib from 'zlib';


    constructor(props: IReactComponentProps, state: IReactComponentState) {
        super(props, state);
        this.jsonPath = "/myfolder/mygzipedjsonfile.json.gz";

        this.state = {
            loading: true,
            error: false,
        };

        this.test();
    }

    private test() {

        fs.readFile(this.jsonPath, function (err, buffer) {
            console.log('success');
        });
    }

Error: TypeError: Object doesn't support property or method 'readFile'

ReactComponent.prototype.test
C:/Source/new-teste/src/ReactComponent.tsx:44
  41 | 
  42 |    private test() {
  43 | 
> 44 |        fs.readFile(this.jsonPath, function (err, buffer) {
     |        ^

Upvotes: 1

Views: 475

Answers (1)

JKleinne
JKleinne

Reputation: 1310

You cannot use fs on the client side. It will not work in browsers so as to protect your file system from potential security threats, fs is a low-level ( OS ) Node.js-specific package. By experience I do all my file processing server-side so I use zlib but again, it is node.js- specific. I can suggest pako which is a zlib port to client-side javascript and use the ungzip() or inflate() function to decompress your json file. Once it has been decompressed, you can simply import your resulting file into your code like such: 

import jsonFile from 'resultingFile.json'

Upvotes: 2

Related Questions