5

I am using the fs module with the following import code

import fs = require('fs')

The code runs until encountering this exception at the second line of the TypeScript codes below 

const filePath = 'data/soylent-uist2010/userSegments.json'
const seg = fs.readFileSync(filePath, {
  encoding: 'utf8',
})

However, if I supply the path argument of readFileSync as a raw string (as below), it works as normal (value is assigned). 

const seg = fs.readFileSync('data/soylent-uist2010/userSegments.json', {
  encoding: 'utf8',
})

The error stack trace is as below,

Viewer.tsx:155 Uncaught (in promise) TypeError: fs.readFileSync is not a function
    at Viewer.<anonymous> (Viewer.tsx:155)
    at step (io.ts:106)
    at Object.next (io.ts:106)
    at io.ts:106
    at new Promise (<anonymous>)
    at __awaiter (io.ts:106)
    at Viewer._this.loadFiles (Viewer.tsx:135)
    at Viewer.<anonymous> (Viewer.tsx:98)
    at step (io.ts:106)
    at Object.next (io.ts:106)

A longer code snippet is as below. I suspect if the async keyword (in the class method) would require an await keyword before fs.readFile()

  loadFiles = async () => {
    this.setState({ pages: [] });
    const {
      pageNumbersToLoad,
      pathInfo: { pdfDir, pdfRootDir }
    } = this.props;
    const fullDirPath = path.join(pdfRootDir, pdfDir);
    const pdfPath = path.join(fullDirPath, pdfDir + ".pdf");
    **const seg = fs.readFile(...);**
Xin Qian
  • 51
  • 1
  • 1
  • 4
  • FYI - 'fs' is for FileSystem, meaning it will only work in a Node.js environment and not in a website. – Steven Stark Mar 12 '19 at 19:06
  • `import fs = require('fs')` isnt that a SyntaxError? Try `const fs = require("fs")` or `import * as fs from "fs";` – Jonas Wilms Mar 12 '19 at 19:06
  • Thanks evegeni! Wanted to add that all codes are inside a class function, maybe it is not the proper place to declare `filePath`? – Xin Qian Mar 12 '19 at 19:08
  • Thanks Steven and Jonas, the project is inside Parcel + TypeScript (es5). I am very new to front-end dev so not sure if it's a Node.js env. – Xin Qian Mar 12 '19 at 19:12
  • @XinQian That will depend on where you are using it. It can be used in build steps, because you build using Node.js, but it can not be used in your client code that's bundled for websites. – Steven Stark Mar 12 '19 at 19:22
  • Current it's build step so I suspect the reason is the async statement. Should I add `await` keyword before fs.readFile() or fs.readFileSync()? – Xin Qian Mar 12 '19 at 19:40
  • Turns out our codebase is relying on electron. From a colleague, "electron lets you mix nodejs code and browser code. you can only do browser things and therefore cant access the filesystem. you have to import {} from '*.json" or require and parcel will load stuff for you. You can't write to a file though.". So for this question, the decision is to abandon fs.readFile() at this moment. – Xin Qian Mar 12 '19 at 20:31
  • oooh, electron! that explains it. I agree with abandoning fs. – Steven Stark Mar 12 '19 at 22:09

2 Answers2

4

Because fs does not have a default export you need to import like so:

import * as fs from 'fs'

ethane
  • 2,329
  • 3
  • 22
  • 33
3

You are mixing javascript standards.

If you choose to use the older javascript ES5 standard, then your code should like like this:

var fs = require('fs');

However, if you're going to use the newer ES6 (and beyond) standard, you would use the import statement like so:

import fs from 'fs';

You seem to be combining the two, hence your error.

NOTE: Because fs has a default export that exports the fs module, you don't need the import * as syntax. See this post for a more detailed explanation.

silencedogood
  • 3,209
  • 1
  • 11
  • 36