I have been trying to implement a graph on a website I am working on and I need to display sensor data. Currently I am using the react-chartjs-2 and a JSON file to display the data. However I was wondering if there is a way to parse a local csv file.
Currently the code I am using is from a different stack overflow question to test the csv file being loaded in.
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import React from 'react';
import {readString} from 'react-papaparse'
import siteListCSV from './xsensACC.csv'
const papaConfig = {
complete: (results, file) => {
console.log('Parsing complete:', results, file);
},
download: true,
error: (error, file) => {
console.log('Error while parsing:', error, file);
},
};
readString(siteListCSV, papaConfig);
function App() {
return (
<h1>Check the console</h1>
);
}
export default App;
After running this, I get an error that says
Module parse failed: Unexpected token (1:47)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> PacketCounter,SampleTimeFine,Acc_X,Acc_Y,Acc_Z,,,,,,,
| 0,398532073,0,0,0,,,,,,,
| 1,398548740,0.0829515159130096,-0.0660160481929779,10.1379995346069,,,,,,,
client (webpack 5.88.2) compiled with 2 errors
So, I followed the link that is supplied and it takes me to the webpack.js website detailing how to implement loaders. However since the project I'm working on uses docusaurus, the closest file I could find to webpack.config.js
is docusaurus.config.js
.
I then looked at the docusaurus documentation for implementing plugins and have had no success in finding official or community plugins that allow loading in CSV files.
I assume that the error is with loading the csv file rather than parsing it.
Is this a small problem with a solution I overlooked or is this an improbable task?
Thanks