webpack项目调用情感分析API时报addEventListener不是函数错误求助

报错原因 #

Uncaught TypeError: buttonSubmit.addEventListener is not a function报错是因为document.querySelector('.btn-submit)未匹配到对应DOM元素返回了null，调用null的方法触发报错，同时你的代码存在重复绑定提交事件、参数传递缺失、服务端取值错误等多个问题，修复步骤如下：

• 删除冗余事件绑定：直接移除client/index.js中window.addEventListener('DOMContentLoaded', ...)整段代码。你已经在HTML的form标签上通过onsubmit="return Client.handleSubmit(event)"绑定了提交事件，不需要额外给按钮绑定click事件，且原有click事件调用handleSubmit未传递event参数，会导致后续event.preventDefault()执行报错。
• 补充服务端缺失依赖：服务端代码使用了path.resolve但未引入path模块，在服务端代码顶部添加const path = require('path')即可。
• 修复服务端API返回值取值错误：axios调用返回的接口实际数据存储在返回对象的data属性下，原有代码直接从axios返回对象取值会得到undefined，修改/add-url接口代码如下：

app.post('/add-url', async (req, res) => {
    const userInput = req.body.url
    const URL = `${API_URL}?key=${apiKey}&url=${userInput}&lang=en`
    console.log(URL)
    try {
        const apiRes = await axios(URL)
        const data = apiRes.data
        res.json({
            text: data.sentence_list?.[0]?.text || '无对应文本内容',
            score_tag: data.score_tag,
            agreement: data.agreement,
            subjectivity: data.subjectivity,
            confidence: data.confidence,
            irony: data.irony
        })
    }
    catch (error) {
        console.log(error.message)
        res.json({
            status: 'error',
            message: 'Error: failed to fetch data'
        })
    }
});

• 检查webpack配置：你在HTML中使用了Client.handleSubmit调用导出方法，需要在webpack.config.js的output配置中添加库挂载规则，确保导出方法挂载到全局Client对象下：

module.exports = {
  // 其他配置保持不变
  output: {
    // 其他output配置保持不变
    libraryTarget: 'var',
    library: 'Client'
  }
}

• 确认环境变量配置：根目录下需要存在.env文件，文件内填写API_KEY=你自己的meaningcloud平台申请的API密钥，否则API调用会返回权限错误。

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