It's a really simple project for school, and I've spent hours trying to solve the issue (reinstalling node modules, updating nodeJs version etc. etc.). Thank you in advance.

Here is my code:

import './App.css';
import Products from "./components/Products/Products"

function App() {
  return (
    <div className="App">
        <Products/>
    </div>
  );
}

export default App;

Products.jsx:

import React from "react"; import {Grid, MuiThemeProvider} from '@material-ui/core';

import Product from "./Product/Product";

const products = \[ {id: 1, name: 'Shoes', description: 'Running shoes.', price: '$5'}, {id: 2, name: 'Macbook', description: 'Apple Macbook.', price: '$100'}, \];

const Products = () =\> { return 
( 
\<main\> 
\<Grid container justifyContent="center" spacing={4}\> {products.map( (product) =\> { \<Grid item key={product.id} xs={12} sm={6} md={4} lg={3}\> \<Product product={product} /\> \</Grid\> } ) } \</Grid\> \</main\> ); }

export default Products;

Product.jsx:

import React from 'react';
import { Card, CardMedia, CardContent, CardActions, Typography, IconButton, MuiThemeProvider } from '@material-ui/core';
import { AddShoppingCart } from '@material-ui/icons';

import useStyles from './styles';

const Product = ({ product, onAddToCart }) => {
  const classes = useStyles();

  const handleAddToCart = () => onAddToCart(product.id, 1);

  return (
    <Card className={classes.root}>
        <CardMedia className={classes.media} image='' title={product.name}/>
    
    </Card>
  );
};

export default Product;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
    <App />,
  document.getElementById("root")
);