معالجة خطأ عند جلب البيانات من ملف خارجي في react js

السلام عليكم

الفايل التالي يمثل جملة من البيانات الخاصة ببعض المنتجات التي سأقوم بجلبها لاحقا

import {hp1} from '../images/hp-1.png'
import {asus1} from '../images/asus-1.png'
import {asus2} from '../images/asus-3.png'
import {dell1} from '../images/dell-1.png'
import {dell2} from '../images/dell-2.png'
import {dell3} from '../images/dell-3.png'
import {hp2} from '../images/hp-2.png'
import {hp3} from '../images/hp-3.png'
import {lenovo1} from '../images/lenovo-1.png'
import {lenovo2} from '../images/lenovo-2.png'
import {lenovo3} from '../images/lenovo-3.png'
import {toshiba1} from '../images/toshiba-1.png'
import {toshiba2} from '../images/toshiba-2.png'
import {toshiba3} from '../images/toshiba-3.png'
import {product1} from '../images/product-1.png'
import {product2} from '../images/product-2.png'
import {product3} from '../images/product-3.png'
import {product4} from '../images/product-4.png'
import {product5} from '../images/product-5.png'
import {product6} from '../images/product-6.png'
import {product7} from '../images/product-7.png'
import {product8} from '../images/product-8.png'

let data = [
    {
        id:1,
        img: hp1,
        title:'Hp one',
        des:'screen 15.6" FHD - processor Intel i7-1065G7',
        price: 900,
        category:'HP',
        rate:4
    },
    {
        id: 2,
        title: "Google Pixel - Black",
        img: product1,
        price: 810,
        category: "GOOGLE1",
        des:   "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub, echo park actually green juice sriracha paleo. Brooklyn sriracha semiotics, DIY coloring book mixtape craft beer sartorial hella blue bottle. Tote bag wolf authentic try-hard put a bird on it mumblecore. Unicorn lumbersexual master cleanse blog hella VHS, vaporware sartorial church-key cardigan single-origin coffee lo-fi organic asymmetrical. Taxidermy semiotics celiac stumptown scenester normcore, ethical helvetica photo booth gentrify.",
        rate: 4.25
    },
    {
        id: 3,
        title: "Samsung S7",
        img: product2,
        price: 1699,
        company: "SAMSUNG",
        des:"Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub, echo park actually green juice sriracha paleo. Brooklyn sriracha semiotics, DIY coloring book mixtape craft beer sartorial hella blue bottle. Tote bag wolf authentic try-hard put a bird on it mumblecore. Unicorn lumbersexual master cleanse blog hella VHS, vaporware sartorial church-key cardigan single-origin coffee lo-fi organic asymmetrical. Taxidermy semiotics celiac stumptown scenester normcore, ethical helvetica photo booth gentrify.",
        total: 4.80
    },
    {
        id: 4,
        img: dell1,
        title: 'Dell one',
        des: 'screen 15.6" FHD - processor Intel i7-1165G7',
        price: 899,
        category: 'DELL',
        rate: 3.10
    },
    {
        id: 5,
        img: dell2,
        title: dell2,
        des: 'screen 15.6" FHD - processor Intel i7-1065G7 ',
        price: '800',
        category: 'DELL',
        rate: 4.75
    },
    {
        id: 6,
        img: dell3,
        title: 'Dell three',
        des: 'screen 15.6" FHD - processor Intel i7-1065G7',
        price: 1699,
        category:'DELL',
        rate:4.55
    },
    {
        id: 7,
        img: asus1,
        title: 'Asus one',
        des: 'screen 15.6" FHD - processor Intel i7-1065G7',
        price: 700,
        category: 'ASUS',
        rate: 4.5
    },
    {
        id: 8,
        title: "HTC 10 - White",
        img: product3,
        price: 1080,
        category: "htc",
        des: "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub, echo park actually green juice sriracha paleo. Brooklyn sriracha semiotics, DIY coloring book mixtape craft beer sartorial hella blue bottle. Tote bag wolf authentic try-hard put a bird on it mumblecore. Unicorn lumbersexual master cleanse blog hella VHS, vaporware sartorial church-key cardigan single-origin coffee lo-fi organic asymmetrical. Taxidermy semiotics celiac stumptown scenester normcore, ethical helvetica photo booth gentrify.",
        rate: 3.84
    },
    {
        id: 9,
        title: "HTC Desire 626s",
        img: product4,
        price: 1024,
        category: "htc",
        des:"Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub, echo park actually green juice sriracha paleo. Brooklyn sriracha semiotics, DIY coloring book mixtape craft beer sartorial hella blue bottle. Tote bag wolf authentic try-hard put a bird on it mumblecore. Unicorn lumbersexual master cleanse blog hella VHS, vaporware sartorial church-key cardigan single-origin coffee lo-fi organic asymmetrical. Taxidermy semiotics celiac stumptown scenester normcore, ethical helvetica photo booth gentrify.",
        rate: 3.98
    },
    {
        id: 10,
        img:asus2,
        title:'Asus two',
        des:'screen 15.6" FHD - processor Intel i7-1065G7',
        price:979,
        category:'ASUS',
        rate:3.75
    },
    {
        id:11,
        img:hp2,
        title:'Hp two',
        des:'screen 15.6" FHD - processor Intel i7-1065G7',
        price:699,
        category:'HP',
        rate:4.42
    },
    {
        id: 12,
        title: "HTC 10 - Black",
        img: product5,
        price: 899,
        company: "htc",
        des: "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub.",
        rate: 4.10
    },
    {
        id: 13,
        img: hp3,
        title: 'Hp three',
        des: 'screen 15.6" FHD - processor Intel i7-1065G7',
        price: 1245,
        category:'HP',
        rate:4.35
    },
    {
        id: 14,
        img:lenovo1,
        title:'Lenovo one',
        des:'screen 15.6" FHD - processor Intel i7-1065G7',
        price: 999,
        category:'LENOVO',
        rate:4.15
    },
    {
        id: 15,
        img: lenovo2,
        title: 'Lenovo two',
        des: 'screen 15.6" FHD - processor Intel i7-1065G7',
        price: 987,
        category:'LENOVO',
        rate:3.92
    },
    {
        id: 16,
        title: "Vintage Iphone",
        img: product6,
        price: 1017,
        company: "apple",
        des: "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub.",
        rate: 2.88
    },
    {
        id: 17,
        title: "Iphone 7",
        img: product7,
        price: 30,
        company: "apple",
        des: "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub.",
        rate: 3.99
    },
    {
        id: 18,
        img:lenovo3,
        title:'lenovo three',
        des:'screen 15.6" FHD - processor Intel i7-1065G7',
        price: 815,
        category:'LENOVO',
        rate:3.10
    },
    {
        id:19,
        img: toshiba1,
        title:'Toshiba one',
        des:'screen 15.6" FHD - processor Intel i7-1065G7',
        price: 1005,
        category:'TOSHIBA',
        rate:4.82
    },
    {
        id:20,
        img: toshiba2,
        title:'Toshiba two',
        des:'screen 15.6" FHD - processor Intel i7-1065G7',
        price: 989,
        category:'TOSHIBA',
        rate:4.21
    },
    {
        id: 21,
        img: toshiba3,
        title:'Toshiba three',
        des:'screen 15.6" FHD - processor Intel i7-1065G7',
        price: 1299,
        category:'TOSHIBA',
        rate:3.75
    },
    {
        id: 22,
        title: "Smashed Iphone",
        img: product8,
        price: 1229,
        company: "apple",
        des: "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub.",
        rate: 4.5
    }
]

export default data

في السطر الأول مثلا  المتغير hp1 يمثل رابط الصورة للمنتج.

عندما أقوم بجلب الصورة في ملف آخر بالطريقة التالية

import {data} from '../data'

function Header() {

  return (
    
    <img src={data[0].img} className="card-img-top" alt="..."/>
    
      )
}

export default Header

تظهر رسالة الخطأ التالية

ERROR in ./src/components/Header/Header.js 31:13-24
 

export 'data' (imported as 'data') was not found in '../data' (possible exports: default)

ERROR in ./src/components/data.js 36:7-15
 

Can't import the named export 'product1' (imported as 'product1') from default-exporting module (only default export is available)

ERROR in ./src/components/data.js 44:7-15
 

Can't import the named export 'product2' (imported as 'product2') from default-exporting module (only default export is available)