I am trying to programm an app that generates JSON file from a CSV file but i am having problems with reading the CSV-file. Here is the code from my vuex store. Only the imports and the generateJSON() function should be the important parts.
import { createStore } from "vuex";
import fs from "fs";
export const store = createStore({
state: {
filePath: "",
datasets: [],
},
getters: {
filePath: (state) => state.filePath,
datasets: (state) => state.datasets,
},
mutations: {
setFilePath(state, path) {
console.log("Path has been set to: " + path);
state.filePath = path;
},
setDatasets(state, path) {
console.log("Datasets have been set");
state.filePath = path;
},
},
actions: {
generateJSON({ getters, commit }) {
console.log("started JSON generation process");
const filePath = getters.filePath;
const allFileContents = fs.readFileSync(filePath + "", "utf-8");
allFileContents.split(/\r?\n/).forEach((line) => {
console.log(`Line from file: ${line}`);
});
commit("setDatasets", "test data");
},
},
});
For some reason i keep getting this Error:
Uncaught (in promise) TypeError: fs__WEBPACK_IMPORTED_MODULE_0___default(...).readFileSync is not a function
at Store.generateJSON (index.js?68eb:28)
at Array.wrappedActionHandler (vuex.esm-bundler.js?03c9:305)
at Store.dispatch (vuex.esm-bundler.js?03c9:1031)
at Store.boundDispatch [as dispatch] (vuex.esm-bundler.js?03c9:914)
at Proxy.onChange (DragArea.vue?2196:47)
at Proxy.drop (DragArea.vue?2196:60)
at onDrop._cache.<computed>._cache.<computed> (DragArea.vue?2196:8)
at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:193)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?d2dd:201)
at HTMLDivElement.invoker (runtime-dom.esm-bundler.js?2725:671)
Eventhough fs is definitely defined at the top of the programm.
I read up on the issue and already tried different ways of importing the fs-module. This didn't solve my problem.