在ReactJS组件中导入async异步函数触发TypeError报错如何解决

问题根因 #

你使用的pa11y是仅支持Node.js服务端环境运行的工具，它依赖Node原生核心模块以及无头浏览器能力，无法直接在浏览器端运行的React组件中导入执行。你在前端代码中引入pa11y相关逻辑时，打包工具注入的Node核心模块polyfill无法兼容pa11y的内部调用逻辑，才触发了该promisify参数类型错误。

解决方案 #

• 方案1：后端封装接口，前端调用
  将pa11y检测逻辑放在Node.js后端服务中实现，对外提供HTTP接口，前端仅需要通过请求调用接口获取检测结果即可，不需要在前端引入pa11y相关代码。
  简单的Express后端示例代码：

  const express = require('express')
  const pa11y = require('pa11y')
  const app = express()
  // 允许跨域可按需添加cors中间件
  app.get('/api/accessibility-check', async (req, res) => {
    const targetUrl = req.query.url
    try {
      const checkResult = await pa11y(targetUrl)
      res.send({
        code: 0,
        data: checkResult
      })
    } catch (e) {
      res.send({
        code: 1,
        msg: e.message
      })
    }
  })
  app.listen(3001, () => console.log('服务启动在3001端口'))
  

  前端组件修改调用逻辑即可：

  const perform_assessment = async () => {
    const resp = await fetch(`http://localhost:3001/api/accessibility-check?url=${encodeURIComponent(url)}`)
    const result = await resp.json()
    // 按需处理结果更新页面
  }
  

• 方案2：更换前端兼容的检测工具
  如果不想额外搭建后端服务，可以换用axe-core这类原生支持浏览器端运行的无障碍检测库，直接在前端React组件中导入使用即可。

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