Vite React Typescript项目导入第三方非模块JS文件报错求助

问题背景 #

在React 18.3.1 + TypeScript 5.4.5 + Vite 5.2.12项目中，导入第三方提供的无export语句的压缩JS文件（other-party-sdk.js）时，触发ts(2306)错误：文件不是模块。已在tsconfig.json中开启allowJs配置，但问题仍存在。

相关代码片段 #

other-party-sdk.js（首尾片段）

(function(_0x4b41bc,_0x1040a6){const _0x2f9107=a0_0x5ae2,_0x36e1b2=_0x4b41bc();while(!![]){try{const _0x3b1764=parseInt(_0x2f9107(0x39f))/0x1+-parseInt(_0x2f9107(0x5ee))/0x2+parseInt(_0x2f9107(0x120))/0x3*(parseInt(_0x2f9107(0x19a))/0x4)+parseInt(_0x2f9107(0x581))/0x5+-parseInt(_0x2f9107(0x4ef))/0x6*(-parseInt(_0x2f9107(0x1d1))/0x7)+-parseInt(_0x2f9107(0x46c))/0x8+parseInt(_0x2f9107(0xdb))/0x9*(-parseInt(_0x2f9107(0x4c8))/0xa);if(_0x3b1764===_0x1040a6)break;else _0x36e1b2['push'](_0x36e1b2['shift']());}catch(_0x11e9bf){_0x36e1b2['push'](_0x36e1b2['shift']());}}}(a0_0x51e4,0xbe510),
...
a0_0x51e4=function(){return _0x4c8758;};return a0_0x51e4();}

MyComponent.tsx（导入报错位置）

import * as otherPartySDK from '../../other-party-sdk';
//import * as otherPartySDK from '../../other-party-sdk.js';

function MyComponent() {

    const stopAutoCapture = _ => {
        otherPartySDK.cmd('...');
    };

    const startAutoCapture = e => {
        otherPartySDK.on('...', result => {
            //...
        });
    }

    return <>Testing</>;
};

export default MyComponent;

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": false,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
     "lib": [
      "DOM", 
      "DOM.Iterable", 
      "ESNext",
    ],
    "types": ["node", "vite-plugin-svgr/client"],
    "module": "ESNext",
    "moduleResolution": "Node",
    "noEmit": true,
    "noImplicitAny": false,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "ESNext",
    "useDefineForClassFields": true
  },
  "include": [
    "src"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

错误信息

File '../MyProject/src/other-party-sdk.js' is not a module. ts(2306) [Ln 1, Col 34]
中文翻译：文件'../MyProject/src/other-party-sdk.js'不是模块。ts(2306) [第1行，第34列]

可行解决方案 #

方案1：创建类型声明文件（推荐） #

在other-party-sdk.js所在目录下创建同名的类型声明文件other-party-sdk.d.ts，手动声明模块结构：

declare module '../other-party-sdk' {
  // 根据SDK实际暴露的方法定义类型，示例如下
  interface OtherPartySDK {
    cmd: (param: string) => void;
    on: (eventName: string, callback: (result: any) => void) => void;
    // 补充其他需要调用的方法类型
  }

  const otherPartySDK: OtherPartySDK;
  export default otherPartySDK;
}

然后修改组件中的导入语句为默认导入：

import otherPartySDK from '../../other-party-sdk';

TypeScript会读取该声明文件，将无模块的JS文件识别为符合类型定义的模块，消除报错。

方案2：通过全局变量引入（适合SDK挂载到window的情况） #

1. 在项目的index.html中通过<script>标签直接引入SDK：

<script src="/src/other-party-sdk.js"></script>

2. 创建全局类型声明文件（比如src/types/global.d.ts），声明window上的SDK变量：

declare global {
  interface Window {
    otherPartySDK: {
      cmd: (param: string) => void;
      on: (eventName: string, callback: (result: any) => void) => void;
    }
  }
}

export {};

3. 在组件中直接使用全局变量调用方法：

const stopAutoCapture = _ => {
  window.otherPartySDK.cmd('...');
};

方案3：使用Vite专属的?script后缀导入 #

Vite支持通过?script后缀将JS文件当作普通脚本加载，而非ES模块：

1. 修改组件中的导入语句为：

import '../../other-party-sdk.js?script';

2. 同样需要添加方案2中的全局类型声明，之后直接通过window.otherPartySDK调用方法即可。

方案4：调整tsconfig辅助配置 #

确保tsconfig.json中的以下配置正确：

• 保持allowJs: true
• 可添加checkJs: false（避免TypeScript检查JS文件的类型问题）
• 确保moduleResolution为Node或NodeNext（当前配置已满足）

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