Please, could anyone hep me with this why I am getting this error Uncaught

    here is my code 

This is the data.js
//data.js//

    export default {
        product: [
            {
                _id: '1',
                name: 'Short Women Gown',
                category: 'Shirts',
                image: '/images/product-1.jpg',
                price: 60,
                brand: 'Hiskywin',
                rating: 4.5,
                numReviews: 10,
                coutInStock: 6
            },
            {
                _id: '2',
                name: 'Nighty Women Gown',
                category: 'Gown',
                image: '/images/product-2.jpg',
                price: 89,
                brand: 'Nike',
                rating: 3.5,
                numReviews: 9,
                coutInStock: 90
            },
            {
                _id: '3',
                name: 'Mimi lilly Club Gown',
                category: 'Women',
                image: '/images/product-3.jpg',
                price: 100,
                brand: 'Champion',
                rating: 5.0,
                numReviews: 5,
                coutInStock: 6
            },
            {
                _id: '4',
                name: 'Short Women Gown',
                category: 'Shirts',
                image: '/images/product-4.jpg',
                price: 30,
                brand: 'Hiskywin',
                rating: 4.5,
                numReviews: 12,
                coutInStock: 6
            },
            {
                _id: '5',
                name: 'Short Women Gown',
                category: 'Shirts',
                image: '/images/product-5.jpg',
                price: 55,
                brand: 'Hiskywin',
                rating: 3.5,
                numReviews: 16,
                coutInStock: 6
            },
            {
                _id: '6',
                name: "African Queen's Fashion Waer",
                category: 'Swears',
                image: '/images/product-6.png',
                price: 97,
                brand: 'African',
                rating: 4.5,
                numReviews: 15,
                coutInStock: 6
            },
        ],
    };
    
    

This is where I create the and export as an object with render() method
//HomeScreen.js//

    import data from '../data.js'; 
    const HomeSreen = {
        render: () =>{
            const { products } = data;
            return `
            <ul class="products">
                ${products.map(
                    (product) => `  
                <li>
                    <div class="product">
                        <a href="/#/products/${product_id}">
                            <img src="${product.image}" alt="${product.name}">
                        </a>
                    <div class="produt-name">
                        <a href="/#/products/1">
                            ${product.name}
                        </a>
                        </div>
                    <div class="product-brand">
                        ${product.brand}
                    </div>
                    <div class="product-price">
                        $${product.price}
                    </div>
                    </div>
                </li>
                `
                )}
            `;
            
        },
    };
    export default HomeSreen;
    
    

Lastly app.js where I create router function and innerHTML to HomeScreen render then set load event of window to router function

    enter code here
    //app.js//

    import HomeSreen from "./screens/HomeScreen.js";

const router = () =>{
    const main = document.getElementById('main-container')
    main.innerHTML = HomeSreen.render();
};
window.addEventListener("load", router )

Have tried many ways to solve this but can’t find solution to it, please I need help n this