Importing data into a react app for plotting

Question

So I've been struggling to import CSV Data into my react app to plot it using deck.gl Here are a couple of things I've tried so far :

Loading the data as a CSV file. To do so I wrote up this bit of code to load the files:

import * as fs from 'fs';
import * as CSVreader from 'csv-reader';

export async function LoadVertexData() {
    let inputStream = fs.createReadStream('../data/vertices.csv', 'utf8');
    inputStream
        .pipe(new CSVreader({ parseNumbers: true, parseBooleans: true, trim: true }))
        .on('data', function (row) {
            console.log('A row arrived: ', row);
        })
        .on('end', function () {
            console.log('No more rows!');
        });
    return "YEET";
}

And in this case, I just get told that fp.createReadStream is not a function

So instead I tried loading up JSON data. using this bit of code :

export async function LoadJsonData(){
    const rawData = await fetch('../data/RestructuredDataExample.json');
    const rawDataParsed = await rawData.json();

    console.log(rawDataParsed.length);

    return rawDataParsed;
}

which tells me that there "Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0" But that makes no sense since the JSON data looks like this

{"nodes": [
{"id": 32470, 
"label": "SomethingSomething", 
"xpos": 1954.292236328125, 
"ypos": -620.9590454101562, 
"modularityClass": 14, "color": 
"rgb(115,192,0)", 
"size": 10.0}, ...]}

This makes absolutely no sense to me and I am very confused at this point any help is greatly appreciated.

Answer 1

So I fixed this by editing hte line that reads

const rawData = await fetch('../data/RestructuredDataExample.json');

In react or webpack you don't want to go up a level and want to use whatever is in the 'public/' folder