NextJS项目中导入SVG遇解析错误，求解决方案

我来帮你搞定这个SVG导入的报错问题！你提到已经尝试了next-images和svgr但没解决，咱们结合你的代码和NextJS的特性一步步排查：

先明确核心问题 #

你的错误提示Module parse failed: Unexpected token，本质是NextJS默认没有配置处理SVG文件的loader，而你尝试的工具可能没配置到位，或者和你的NextJS版本不兼容。

分版本给出解决方案 #

如果你用的是Next.js 13+（推荐） #

Next.js 13及以上版本已经内置了SVG支持，不需要额外安装第三方包，两种导入方式任选：

1. 作为React组件导入（推荐）
   修改你的导入语句，加上?react后缀：

   import AboutImg from '../assets/aboutimg.svg?react'
   

   然后直接把组件渲染到页面，不用img标签：

   <div className="column-1">
     <AboutImg />
   </div>
   

2. 作为静态资源导入
   把aboutimg.svg移动到项目根目录的public文件夹下，然后直接用文件路径作为src：

   <div className="column-1">
     <img src="/aboutimg.svg" alt="About illustration" />
   </div>
   

   NextJS会自动处理public文件夹下的静态资源，不需要任何额外配置。

如果你用的是Next.js 12及以下版本 #

需要正确配置第三方loader：

方案1：配置@svgr/webpack

1. 先安装依赖：

   npm install @svgr/webpack --save-dev
   

2. 在项目根目录的next.config.js中添加配置：

   module.exports = {
     webpack(config) {
       config.module.rules.push({
         test: /\.svg$/i,
         issuer: /\.[jt]sx?$/, // 只处理JS/TS文件中的SVG导入
         use: ['@svgr/webpack'],
       });
       return config;
     },
   };
   

3. 然后像组件一样导入并使用：

   import AboutImg from '../assets/aboutimg.svg'
   
   // 直接渲染组件
   <AboutImg />
   

方案2：配置next-images

1. 安装适配你NextJS版本的next-images（注意：新版本NextJS可能不再兼容这个包，优先用上面的svgr方案）：

   npm install next-images --save-dev
   

2. 修改next.config.js：

   const withImages = require('next-images')
   module.exports = withImages({
     // 可以添加其他NextJS配置项
   })
   

3. 重启开发服务器，然后你的原有代码就能正常工作了。

检查你的现有代码问题 #

你当前的代码中，用import AboutImg from '../assets/aboutimg.svg'然后在img标签的src里使用，这种写法只适用于把SVG当作静态资源的场景（要么放在public文件夹，要么配置了能处理资源导入的loader）。如果是当作组件导入，就不该用img标签包裹。

最后提醒 #

• 修改配置后一定要重启NextJS开发服务器，否则配置不会生效。
• 检查你的SVG文件本身是否有语法错误（比如未闭合的标签），虽然报错提示是loader问题，但也有可能是文件本身的问题。

内容的提问来源于stack exchange，提问作者Mac Dev