Vue3中使用axios-jsonp报错求助：找不到jsonpAdapter及语法问题

问题1：提示找不到jsonpAdapter #

原因 #

1. axios-jsonp被错误放在devDependencies中，生产环境运行时无法访问该依赖
2. 使用require()导入不符合ES模块规范，且没有正确获取到包的默认导出

解决步骤 #

1. 调整依赖位置：将axios-jsonp从devDependencies移到dependencies，确保运行时能正常加载。可以直接执行命令重新安装：

npm install axios-jsonp --save

或者手动修改package.json后执行npm install。

2. 替换导入方式：用ES模块的import语句替代require()，正确获取jsonp适配器：

import jsonpAdapter from 'axios-jsonp';

问题2：ESLint报错“Require statement not part of import statement” #

原因 #

项目启用了@typescript-eslint/no-var-requires规则，该规则禁止在ES模块中使用CommonJS的require()语句，符合TS+Vue3的模块规范要求。

解决步骤 #

直接将代码中的require()替换为import语句（已在问题1的解决步骤中完成）。如果特殊场景必须使用require()，可以在ESLint配置文件中禁用该规则，但不推荐此做法。

修改后的完整代码示例 #

import { defineComponent } from 'vue';
import axios from 'axios';
import jsonpAdapter from 'axios-jsonp';

export default defineComponent({
  setup() {
    const getProductList = async (inputValue: string) => {
      const appId = '<myappId>';
      // 使用URLSearchParams构造请求参数，避免字符串拼接的潜在问题
      const params = new URLSearchParams({
        appid: appId,
        query: inputValue
      });

      try {
        const response = await axios({
          url: `https://shopping.yahooapis.jp/ShoppingWebService/V3/itemSearch?${params}`,
          adapter: jsonpAdapter
        });
        // 后续处理返回数据
        console.log(response.data);
      } catch (error) {
        // 错误处理逻辑
        console.error('请求失败:', error);
      }
    };

    return { getProductList };
  }
});

补充：TypeScript类型声明问题 #

如果使用TypeScript时出现类型报错（axios-jsonp无官方类型定义），可以在项目的src/types目录下新建axios-jsonp.d.ts文件，手动添加类型声明：

declare module 'axios-jsonp' {
  import type { AxiosAdapter } from 'axios';
  const adapter: AxiosAdapter;
  export default adapter;
}

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