Vue+NuxtJS导入v-svg-icons时Web预览报Unexpected token '<'错误

基于Vue + NuxtJS开发的项目，在Web预览环节触发Unexpected token '<'报错，报错出现在调用已导入的第三方包v-svg-icons时。

• 该包此前在页面中可正常运行
• 故障突发前无相关代码改动
• 已确认报错由v-svg-icons包导致，未明确故障突发原因，暂未找到有效修复方案

故障复现代码：

<template>
     <icons name="angle-down"></icons>
</template>
<script>
     import icons from "v-svg-icons";

     export default {
          components: {
               icons
          }
     }
</script>

Unexpected token '<'是典型的资源加载类错误：JS运行环境尝试将返回的HTML内容当作JS代码解析时，遇到首字符<就会抛出该错误。
放到Nuxt场景下，无代码改动突发该问题的常见原因有三个：

• 本地依赖缓存损坏，v-svg-icons的包文件缺失，请求包资源时返回了Nuxt默认404页面（HTML格式）
• 依赖版本隐式升级，新版v-svg-icons的构建产物不兼容Nuxt SSR解析规则
• Nuxt本地构建缓存异常，未正确处理第三方包的转译逻辑

按以下顺序逐一验证，即可解决问题：

1. 清理全量缓存后重装依赖
   先删除依赖目录、构建缓存、锁文件，再重新安装依赖，排除缓存损坏问题：

rm -rf node_modules .nuxt package-lock.json yarn.lock pnpm-lock.yaml
npm install

安装完成后重启项目验证。

2. 配置Nuxt转译规则
   如果重装后问题仍存在，在项目根目录的nuxt.config.js中，将v-svg-icons加入构建转译列表，让Nuxt在构建阶段正确处理该包的源码：

export default {
  // 其他配置项
  build: {
    transpile: ['v-svg-icons']
  }
}

保存配置后重启项目验证。

3. 强制组件仅在客户端渲染
   如果前两步都不生效，说明v-svg-icons本身不支持服务端渲染，直接使用Nuxt内置的<client-only>组件包裹图标组件，跳过服务端渲染环节即可：

<template>
     <client-only>
          <icons name="angle-down"></icons>
     </client-only>
</template>
<script>
     import icons from "v-svg-icons";

     export default {
          components: {
               icons
          }
     }
</script>

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