小编Sat*_*abh的帖子

我想调用一个自定义挂钩，该挂钩将在单击按钮时发送电子邮件。

customHook.ts

async function sendEmail(userName: string, userEmail: string, userPhone: string) {

  const mailToUser = {
    to: userEmail,
    subject: mail.subject,
    body: mail.body,
  };

  await fetch(`/api/sendEmail`, {
    method: `POST`,
    headers: { 'Content-Type': `application/json` },
    body: JSON.stringify(mailToUser),
  });
  
  console.log(mailToUser);
}

export default sendEmail;

这是单击按钮时需要调用以发送邮件的自定义挂钩文件

contact.tsx

import sendEmail from 'src'

export const Contact = (props:any) {
  const userName = `Name`;
  const userEmail = `email`;
  const userPhone = `333333333`;

  return (
    <button onClick={() => sendEmail(userName, userEmail, userPhone)}>Contact</button>
  )
}

当我点击按钮时出现的错误是：

**Error: Invalid hook call. Hooks …

当我尝试为我的反应应用程序运行构建命令时，我看到此错误导致构建失败：

var stripAnsi = require('strip-ansi');
                ^

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\rahul\Documents\project_name\node_modules\strip-ansi\index.js from C:\Users\rahul\Documents\cambian\cambian-widget-client\node_modules\react-dev-utils\FileSizeReporter.js not supported.
Instead change the require of index.js in C:\Users\rahul\Documents\project_name\node_modules\react-dev-utils\FileSizeReporter.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (C:\Users\rahul\Documents\project_name\node_modules\react-dev-utils\FileSizeReporter.js:15:17)
    at Object.<anonymous> (C:\Users\rahul\Documents\project_name\node_modules\react-scripts\scripts\build.js:35:26) {
  code: 'ERR_REQUIRE_ESM'
}
error Command failed with exit code 1.

但是当我删除锁定文件并重新运行构建命令时，它执行成功。然后，新的构建再次失败，直到锁定文件被删除。

这导致了一个主要问题，因为每次进行更改时我们都必须手动部署应用程序。

两周前一直运行良好，我可以确认既没有添加新的软件包，也没有更新任何软件包

我已经尝试过什么？

• 升级node、npm、yarn但没有任何效果
• 纱线缓存清理
• 纱线审计修复--force

使用的构建命令： react-scripts build

环境：

node: 16.19.0
npm: 9.8.1
yarn: 1.22.19

React 包版本

    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "^5.0.0",