I am trying to import an svg within a NextJS project, everytime I get this error
./assets/aboutimg.svg 1:0 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. See https://webpack.js.org/concepts#loaders > <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="578" height="1028" viewBox="0 0 578 1028"> | <image id="_64538565_2370063099695596_8091233071539421184_n" data-name="64538565_2370063099695596_8091233071539421184_n" width="578" height="1028" xlink:href="
I have tried using next-images and also svgr. I will paste my About.js code below, it would be excellent if someone could let me know what I have been doing wrong.
import LayoutNoLogo from '../comps/LayoutNoLogo' import AboutImg from '../assets/aboutimg.svg' const About = () => { return ( <LayoutNoLogo> <div className="row"> <div className="column-1"> <img src={AboutImg} /> </div> <div className="column-2"> <h1>About</h1> </div> </div> <style jsx>{` `}</style> </LayoutNoLogo> ) } export default About;
Advertisement
Answer
Using next-images and adding the correct module exports allowed me to use images of all file types.