使用AutoComplete.js报错：‘tarekraafat在当前上下文中不存在’

可能的原因与修复步骤 #

1. 移除重复引入（npm安装+CDN二选一） #

同时使用npm本地安装和CDN引入会导致上下文冲突，必须二选一：

• 若保留npm安装：删除HTML中的CDN脚本和样式链接，改用模块导入：

  // ES模块导入
  import autoComplete from '@tarekraafat/autocomplete.js';
  // 或CommonJS导入
  const autoComplete = require('@tarekraafat/autocomplete.js');
  

• 若保留CDN引入：执行npm uninstall @tarekraafat/autocomplete.js删除本地包，避免冲突。

2. 确认全局变量的正确使用 #

CDN引入后，全局暴露的变量是autoComplete而非tarekraafat，检查初始化代码：

// 正确写法
const autoCompleteJS = new autoComplete({
  selector: '#autoComplete',
  data: {
    src: ['示例数据1', '示例数据2']
  }
});

不要错误使用tarekraafat.autoComplete调用，该包的全局名称就是autoComplete。

3. 检查构建工具的模块解析配置 #

如果使用Webpack/Vite等构建工具且保留npm安装，需确保模块被正确解析：

• Webpack：无需额外配置，确认@tarekraafat/autocomplete.js在node_modules目录中，导入路径无误。
• Vite：若遇解析问题，可在vite.config.js中添加依赖优化：

  export default {
    optimizeDeps: {
      include: ['@tarekraafat/autocomplete.js']
    }
  }
  

4. 清除缓存重建项目 #

• 执行npm cache clean --force清除npm缓存
• 删除node_modules和package-lock.json，重新执行npm install
• 重启开发服务器并重新构建项目

内容的提问来源于stack exchange，提问作者Pınar