Use fs in typescript

Question

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 ?

this your `Login` component is a browser component, right? Why are you trying to use the `fs` module? — Diullei, Mar 27 '17 at 13:51
If you are using wepback you could require file contents using `raw-loader`. — Yury Tarabanko, Mar 27 '17 at 14:02

Andre Pena · Accepted Answer · 2020-04-15T08:16:19.837

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/**/*"
    ]
}

```fs```, in my case, is used to open a file that contains an Auth0 public key, which is used to verify a jwt token. I'm still fairly new to React, thanks for the advice ! — Pierre Olivier Tran, Mar 27 '17 at 15:37

score 21 · Answer 2 · answered Jul 27 '19 at 14:45

Using node -v 10.15.0 and @types/node:

It seems declaration has been rewritten...

fs definition is declared as a module so you should do:

import fs from "fs"; // Without star

compiled:

var fs_1 = __importDefault(require("fs"));

or

const fs = require("fs"); instead of require("fs").default;

with star you will have fs.default.TheFunctionYouWant instead of fs.TheFunctionYouWant

The better way is to console.log(fs); to see what it is imported.

{
  "compilerOptions": {
    "typeRoots": [],
    "types": [
      "node"
    ]
  }
}

score 9 · Answer 3 · answered Jan 06 '22 at 20:32

9

Latest implantation, you can import methods.

import { readFile, writeFile } from 'fs/promises';

And use directly...

// write
await writeFile('./file.json', content);

// read
const content = await readFile('./file.json');

Reference https://nodejs.org/docs/latest-v14.x/api/

answered Jan 06 '22 at 20:32

Rafael Pizao

742
8
21

Is this possible to implement in React? (TSX) – Hugobop Mar 30 '23 at 22:18
1

I never try, but I believe it. – Rafael Pizao Apr 06 '23 at 12:21
2

Don't forget to add `@types/node` to package.json: `"devDependencies": { "@types/node": "^20.3.3" }` – Steven Almeroth Jul 02 '23 at 20:38

score 3 · Answer 4 · answered Jan 07 '23 at 08:32

3

It may also help to install @types/node: npm i --save-dev @types/node

answered Jan 07 '23 at 08:32

acenturyandabit

1,188
10
24

Use fs in typescript

4 Answers4

Linked