Uncaught TypeError: fs_1.default.readFileSync is not a function

Question

I am utilizing Parcel bundler in a project, but one of my biggest roadblocks is that I am making use of the fs module from the Node Standard Library and I get this error as a result:

fs_1.default.readFileSync is not a function

The above error is based on this logic:

import fs from 'fs';

class Data {
  Address: string;
  General_Plan_Designation: string;
  Latitude: number;
  Longitude: number;

  static DELIMITER = ",";

  constructor(rawRow) {
    const data = rawRow.split(Data.DELIMITER);

    this.Address = data[0];
    this.General_Plan_Designation = data[1];
    this.Latitude = parseFloat(data[2]);
    this.Longitude = parseFloat(data[3]);
  }
}

const ROW_DELIMITER = "\r\n";

const rawData = fs.readFileSync("Cales_trim_down.csv", {
  encoding: "utf-8",
});

const data: Data[] = [];

for (const rawRow of rawData.split(ROW_DELIMITER)) {
  data.push(new Data(rawRow));
}

console.log(data);

I was told to do import * as whateverFS from 'fs'; but that did not resolve the issue. I was told to go into the tsconfig.json file and ensure esModule something or other is set to true but Parcel does not have one, not one I can reconfigure at least.

How do I get Node Standard Library modules to work with Parcel?

Answer 1

So when using TypeScript with Node Standard Library modules and running a local server with Parcel, you can't just install Parcel globally and run it like parcel index.html as I was doing.

In this case you have to create a package.json file:

{
  "scripts": {
    "build": "parcel build ./src/index.ts --target node",
    "start": "parcel index.html"
  },
  "devDependencies": {
    "typescript": "^4.2.4"
  },
  "dependencies": {
    "@types/googlemaps": "^3.43.3",
    "@types/node": "^15.0.2",
    "fs": "0.0.1-security",
    "parcel-bundler": "^1.12.5",
    "path": "^0.12.7"
  }
}

That's part A of the solution, part B is instead of using fs.readFileSync() you have to just import readFileSync() like so:

import { readFileSync } from "fs";

and apply it like so:

export const rawData = readFileSync("src/Cales_trim_down.csv", {
  encoding: "utf-8",
});