ts-node导入SVG报SyntaxError: Unexpected token '<'的解决问询

以下几种方法可解决SVG导入引发的语法错误，让console.ts正常启动调试：

方法1：用ts-node忽略SVG文件 #

直接修改package.json中的脚本，添加--ignore '\.svg$'参数，让ts-node跳过解析SVG文件：

"console": "ts-node --ignore '\\.svg$' --project ./tsconfig.console.json -r tsconfig-paths/register console.ts"

注意反斜杠需转义，保证shell能正确识别正则规则。

方法2：为SVG文件配置Mock转换器 #

给SVG文件设置一个空占位模块，让ts-node解析时返回合法的JS对象：

1. 创建svg-mock.ts文件：

export default {};

2. 在tsconfig.console.json中添加ts-node配置，指定SVG文件的处理规则：

{
  "compilerOptions": {
    // 保留原有编译配置
  },
  "ts-node": {
    "transpileOnly": true,
    "fileExtensions": {
      ".svg": "ts"
    },
    "require": ["./svg-mock.ts"]
  }
}

方法3：用模块别名Mock SVG #

通过tsconfig-paths将所有SVG导入指向空模块：

1. 创建empty-module.ts文件：

export default {};

2. 在tsconfig.console.json的compilerOptions中添加paths配置：

{
  "compilerOptions": {
    // 保留原有编译配置
    "paths": {
      "*.svg": ["./empty-module.ts"]
    }
  }
}

方法4：条件导入依赖包 #

如果带SVG的包仅用于前端，可在console.ts中通过条件判断或错误捕获跳过导入：

let svgDependentModule = {};
try {
  svgDependentModule = require('你的依赖包名');
} catch (e) {
  // 导入失败时使用空对象占位
}

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