I keep getting the error "cannot find module papaparse" for the first code and "cannot find module d3 on the second code block. I have them installed and can see the versions 5.4.1 for papa and 7.8.5 for d3? Why can't they be found. I feel like it has to be a simple issue I'm overlooking. I feel like solving one will solve the other. Maybe I'm wrong but any help is appreciated.
Code with papaparse issue:
import React, { useState, useEffect } from 'react';
import { Table, TableContainer, TableHead, TableRow, TableCell, TableBody, Paper, TableSortLabel } from '@mui/material';
import { readString } from 'papaparse';
import { orderBy } from 'lodash';
function TableCreate() {
const [data, setData] = useState([]);
const [sortedData, setSortedData] = useState([]);
const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
useEffect(() => {
const fetchData = async () => {
const response = await fetch('/dummyDataCSV.csv');
const reader = response.body.getReader();
const result = await reader.read();
const decoder = new TextDecoder('utf-8');
const csv = decoder.decode(result.value);
const parsedData = readString(csv).data;
setData(parsedData);
setSortedData(parsedData.slice(1)); // Skip the header row
};
fetchData();
}, []);
const handleSort = (column) => {
let direction = 'asc';
if (sortConfig.key === column && sortConfig.direction === 'asc') {
direction = 'desc';
}
setSortConfig({ key: column, direction });
setSortedData(orderBy(sortedData, [column], [direction]));
};
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
{data.length > 0 && data[0].map((header, index) => (
<TableCell key={index}>
<TableSortLabel
active={sortConfig.key === index}
direction={sortConfig.key === index ? sortConfig.direction : 'asc'}
onClick={() => handleSort(index)}
>
{header}
</TableSortLabel>
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{sortedData.map((row, rowIndex) => (
<TableRow key={rowIndex}>
{row.map((cell, cellIndex) => (
<TableCell key={cellIndex}>{cell}</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
export default TableCreate;
And for the second group of code for d3:
import React, { useState, useEffect } from "react";
import { Table, TableHead, TableRow, TableCell, TableBody } from '@mui/material';
import TableContainer from '@mui/material/TableContainer';
import Paper from '@mui/material/Paper';
import * as d3 from "d3";
function TableTestD3() {
const [tableData, setTableData] = useState([]);
useEffect(() => {
d3.csv("dummyDataCSV.csv").then((data) => {
setTableData(data);
});
}, []);
const headers = tableData.length > 0 ? Object.keys(tableData[0]) : [];
return (
<TableContainer component={Paper}>
<Table aria-label="simple table">
<TableHead>
<TableRow>
{headers.map((header) => (
<TableCell align="center" key={header}>{header}</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{tableData.map((row, index) => (
<TableRow key={index}>
{headers.map((header) => (
<TableCell align="center" key={header}>{row[header]}</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
export default TableTestD3;
I was asked to see my packages.JSON here it is:
{
"name": "material-dashboard-2-pro-react",
"version": "2.2.0",
"private": true,
"author": "Creative Tim",
"license": "See license in https://www.creative-tim.com/license",
"description": "React version of Material Dashboard 2 PRO by Creative Tim",
"bugs": {
"url": "https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues"
},
"repository": {
"type": "git",
"url": "git+https://github.com/creativetimofficial/ct-material-dashboard-pro-react.git"
},
"dependencies": {
"@asseinfo/react-kanban": "2.2.0",
"@emotion/cache": "11.10.8",
"@emotion/react": "11.10.8",
"@emotion/styled": "11.10.8",
"@fullcalendar/core": "^6.1.6",
"@fullcalendar/daygrid": "6.1.6",
"@fullcalendar/interaction": "6.1.6",
"@fullcalendar/react": "6.1.6",
"@fullcalendar/timegrid": "6.1.6",
"@material-ui/core": "^4.12.4",
"@material-ui/styles": "^4.11.5",
"@mui/icons-material": "5.11.16",
"@mui/material": "5.12.3",
"@react-jvectormap/core": "1.0.4",
"@react-jvectormap/world": "1.1.2",
"chart.js": "4.3.0",
"chroma-js": "2.4.2",
"d3": "^7.8.5",
"draft-convert": "^2.1.13",
"draft-js": "^0.11.7",
"dropzone": "6.0.0-beta.2",
"flatpickr": "4.6.13",
"formik": "2.2.9",
"html-react-parser": "3.0.16",
"prop-types": "15.8.1",
"react": "18.2.0",
"react-chartjs-2": "5.2.0",
"react-dom": "18.2.0",
"react-draft-wysiwyg": "^1.15.0",
"react-flatpickr": "3.10.13",
"react-github-btn": "1.4.0",
"react-images-viewer": "1.7.1",
"react-router-dom": "6.11.0",
"react-scripts": "5.0.1",
"react-table": "7.8.0",
"stylis": "4.1.4",
"stylis-plugin-rtl": "2.1.1",
"uuid": "9.0.0",
"yup": "1.1.1"
},
"scripts": {
"start": "GENERATE_SOURCEMAP=false react-scripts start",
"build": "GENERATE_SOURCEMAP=false react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint": "8.39.0",
"eslint-config-prettier": "8.8.0",
"eslint-plugin-import": "2.27.5",
"eslint-plugin-jsx-a11y": "6.7.1",
"eslint-plugin-prettier": "4.2.1",
"eslint-plugin-react": "7.32.2",
"eslint-plugin-react-hooks": "4.6.0",
"prettier": "2.8.8"
},
"overrides": {
"svgo": "3.0.2"
}
}
