I am getting the error Uncaught TypeError: fs.writeFile is not a function in my program, in which I just want to write something to a JSON file. The fs.readFileSync function works properly, but fs.writeFile doesn't for some reason. Here is my code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello World!</h1>
<button id="button">Write Something</button>
<script src="./app.js"></script>
</body>
</html>
JavaScript:
const fs = require("fs");
const data = fs.readFileSync("db.json", "utf8");
const db = JSON.parse(data);
console.log(db);
document.getElementById("button").onclick = () => {
fs.writeFile("db.json", "test", () => {
console.log("Written file!");
});
};
JSON:
["something1", "something2"]
Just to let you know, I am using Parcel as my bundler. Please help me on why this is not working.
I am getting the error Uncaught TypeError: fs.writeFile is not a function in my program, in which I just want to write something to a JSON file. The fs.readFileSync function works properly, but fs.writeFile doesn't for some reason. Here is my code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello World!</h1>
<button id="button">Write Something</button>
<script src="./app.js"></script>
</body>
</html>
JavaScript:
const fs = require("fs");
const data = fs.readFileSync("db.json", "utf8");
const db = JSON.parse(data);
console.log(db);
document.getElementById("button").onclick = () => {
fs.writeFile("db.json", "test", () => {
console.log("Written file!");
});
};
JSON:
["something1", "something2"]
Just to let you know, I am using Parcel as my bundler. Please help me on why this is not working.
Share Improve this question asked May 31, 2021 at 10:14 DG27DG27 872 gold badges3 silver badges9 bronze badges 1-
1
You shouldn't have write access from the browser. So, I'd expect
fsrunning in the browser might just have all the writing methods removed. – VLAZ Commented May 31, 2021 at 10:17
3 Answers
Reset to default 2You won't be able to use writeFile in the browser, even if you use a bundler because this is Node.js and not a browser API. Bundlers won't embed native Node.js functions in a browser's build because these are two different execution environments.
In the browser, you can't trigger arbitrarily a file write on the disk without the user's consent, so you have to actually trigger a file download instead.
The Node.js fs module is not written in JavaScript. It is a core part of Node.js written in C/C++. It won't run in a web browser and can't be bundled into a JS file.
(Note that readFileSync can be inlined, it just reads the file when it is bundled instead of at runtime).
If you want to generate a JSON file then you can either:
- Write a web service (which will write JSON to a file on the server) and then issue an HTTP request to it or
- Convert the data into a downloadable URL (so it will be saved to the user's download folder).
I was facing the same issue.
Replace const fs = require("fs"); with const fs = require('fs-extra');
This worked for me.
fs-extra provides additional functionality on top of the core fs module, making it a more convenient option for many use cases.
If this works for anyone else, do let me know.