ReactSVG无法作为JSX组件的Next.js项目构建报错问题

针对你开发环境正常但构建时遭遇ESLint类型报错的问题，以下是几个可行的解决方案：

1. 修正TypeScript类型定义 #

报错核心原因之一是afterInjection中svg的类型定义错误，且querySelectorAll返回的是NodeList而非数组，需要转换后才能正常遍历。修改代码如下：

'use client'

import { ReactSVG } from "react-svg";

// 调整函数参数类型为数组
const attachTurnsToSvg = (elements: SVGRectElement[]) => {
  elements.forEach((element) => {
    // insert text inside SVG elements
  });
};

const attachCallsToSvg = (elements: SVGCircleElement[]) => {
  elements.forEach((element) => {
    element.addEventListener('click', (e) => {
      console.debug('clicked', e);
    });
  });
};

const Page = () => {
  // ... 其他代码不变

  return (
    <>
      {/* ... 其他元素 */}
      <ReactSVG
        src="/mysvg.svg" 
        beforeInjection={(svg: SVGSVGElement) => {
          const svgWidth = width !== undefined ? 0.625 * width : 1200;
          const svgHeight = height !== undefined ? 0.88 * height : 800;
          svg.setAttribute('style', `width: ${svgWidth}px; height: ${svgHeight}px;`);
        }}
        afterInjection={(svg: SVGSVGElement) => {
          // 将NodeList转换为数组，并指定元素类型
          const rects = Array.from(svg.querySelectorAll('rect.turnRect') as NodeListOf<SVGRectElement>);
          attachTurnsToSvg(rects);
          const circles = Array.from(svg.querySelectorAll('circle.callCircle') as NodeListOf<SVGCircleElement>);
          attachCallsToSvg(circles);
        }}
        className={styles.map} 
      />
    </>
  )
}

export default Page;

2. 检查版本兼容性 #

部分react-svg版本可能与React 18/Next.js 13+的客户端组件模式不兼容，尝试升级到最新适配版本：

npm install react-svg@latest

也可查看react-svg官方文档，确认适配你当前Next.js版本的具体版本号后再安装。

3. 临时绕过类型检查（不推荐长期使用） #

若以上方法无法快速解决，可临时修改TypeScript配置跳过第三方库的类型检查：
在tsconfig.json中添加：

{
  "compilerOptions": {
    // ... 其他原有配置
    "skipLibCheck": true
  }
}

该选项能快速绕过当前报错，但可能隐藏其他类型问题，仅作为临时应急方案。

4. 切换导入方式 #

部分场景下，库的命名导出可能存在类型异常，尝试改用默认导入：

import ReactSVG from "react-svg";

替换原有的import { ReactSVG } from "react-svg";

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