How to fix the error appropriate loader to handle this file type in react hooks Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How to fix the error appropriate loader to handle this file type in react hooks without wasting too much if your time.

The question is published on by Tutorial Guruji team.

data = [{
 img: '01d'
}, {
 img: '02d'
}]

data && data.map((item) => (
      <img src={require(`./icons/${item['img']}.svg`).default} />
))

I have an error which is the Error: Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. which I’m trying to display the icon based on the data img

this is my directory:

directory
 - src/
 - src/location/
    - index.tsx
 - src/icons/
    - 01d.svg
    - 02d.svg
    - 03d.svg

but when I try the require(`./icons/01d.svg`).default its working. but What I’m trying to do to is to make it dynamic.

Answer

You can use next.js to serve static files.

Store the svg files under your public directory rather than under src.

Then you can generate URLs pointing to those static files in your react template, instead of requireing them:

data && data.map((item) => (
      <img src={`/icons/${item['img']}.svg`} />
))
We are here to answer your question about How to fix the error appropriate loader to handle this file type in react hooks - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji