Can’t import SVG into Next.js

by

You need to provide a webpack loader that will handle SVG imports, one of the famous one is svgr.

In order to configure it to work with next, you need to add to your next.config.js file the usage of the loader, like that:

// next.config.js
    
module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      issuer: {
        test: /\.(js|ts)x?$/,
       // for webpack 5 use
       // { and: [/\.(js|ts)x?$/] }
      },
      
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

For more config info, check out the docs.

Don’t forget to install @svgr/webpack first:

$ npm install --save-dev @svgr/webpack

Edit

I’ve added an issuer section which strict these svg as component only for svgs that are imported from js / ts files.
This allows you to configure other behaviour for svgs that are imported from other file types (such as .css)

More Related Contents:

  1. Why am I getting ReferenceError: self is not defined when I import a client-side library?
  2. Warning: Text content did not match. Server: “I’m out” Client: “I’m in” div
  3. How to access files uploaded to the public folder in Next.js?
  4. NextJS environment variables aren’t working
  5. Next.js – Error: only absolute urls are supported
  6. Target Active Link when the route is active in Next.js
  7. Nextjs: Unable to load images from static folder
  8. Display Info Window on the multiple coordinates on the arcgis map in Next JS
  9. next-redux-wrapper TypeError: nextCallback is not a function error in wrapper.getServerSideProps
  10. How to setup i18n translated URL routes in Next.js?
  11. NextJs CORS issue
  12. How does the revalidate process in Incremental Static Regeneration work?
  13. How to type a page component with props in Next.js?
  14. How to hash CSS class names in Nextjs?
  15. Persistent navigation in a NextJs _app
  16. Dynamically build classnames in TailwindCss
  17. How to dynamically import non-React client side libraries in Next.js?
  18. Warning: Prop `className` did not match. when using styled components with semantic-ui-react
  19. Loading Screen on Next.js page transition
  20. Next.js router is returning query parameters as undefined on first render?
  21. How to detect window size in Next.js SSR using react hook?
  22. Unable to load images from static folder
  23. Get URL pathname in nextjs
  24. Next Image not taking class properties
  25. How to handle login failed error in NextAuth.js?
  26. Is there a “Best Practices” on designing an application written both in React and React-Native?
  27. My React Component is rendering twice because of Strict Mode
  28. What does ‘Only a ReactOwner can have refs.’ mean?
  29. Warning: It looks like you’re using the development build of the Firebase JS SDK
  30. React: Show loading spinner while images load

Leave a Comment