Home/ Questions/Q 924
Next
Answered
Kenil Vasani
Kenil Vasani

Kenil Vasani

View Profile
  • 2
Asked: 2020-12-19T22:01:00+00:00 In:

Use fs in typescript

  • 2

I’m just trying to read a file using fs.readFileSync, though it seems it cannot be found.

I made sure to declare it, added it within my constructor:

export default class Login extends React.Component<LoginProps, {}> {
    private webAuth: auth0.WebAuth;
    fs: any;

    constructor(props: any, context: any) {
        super(props, context);
        this.fs = require('fs');
        this.webAuth = new auth0.WebAuth({
            clientID: conf.auth0.clientId,
            domain: conf.auth0.domain,
            responseType: 'token id_token',
            redirectUri: `${window.location.origin}/login`
        });
    }
[...]

And used it in a simple function:

verifyToken = (token) => {

    console.log(this.fs);
    let contents = this.fs.readFileSync('../utils/public.key', 'utf8');
    console.log(contents);

}

But this raises an Uncaught TypeError: _this.fs.readFileSync is not a function. Is there a special way to include fs in Typescript ?

node.jstypescript
Share

    1 Answer

    1. Kenil Vasani

      Kenil Vasani

      View Profile
      Best Answer

      I can’t imagine any case in which you would use fs inside a React component. Even though you can use React in the server to render stuff, the same code is supposed to run in the client, there’s no way you can access fs in the client.

      If you want to use fs in the server, this is an example:

      import * as fs from 'fs';
import * as path from 'path';
fs.readFile(path.join(__dirname, '../../client/index.html'), 'utf8', (error, data) => {
        // ...
    })

      On your package.json file, make sure to have a dependency on node

      "dependencies": {
 "@types/node": "^7.0.5"
}

      And this is how my tsconfig.json file looks like:

      {
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "allowJs": true,
        "typeRoots": [
            "./node_modules/@types"
        ]
    },
    "include": [
        "./db/**/*",
        "./src/**/*"
    ]
}
      • 3

    You must login to add an answer.