React.js项目npm start运行正常但npm run build构建失败问题求助

看起来你的问题是开发环境运行一切正常，但生产构建时因为未处理的错误和渲染逻辑问题导致编译停滞报错。我帮你分析两个核心问题并给出具体修复方案：

1. 错误处理不当导致的未捕获Promise异常 #

你的fetchData函数里的错误处理逻辑存在漏洞：

• 你在fetch和res.json()后添加了.catch()但直接返回Promise.reject()，这会让错误继续向上抛出，但onSubmit调用fetchData时并没有处理这个异常，生产构建时React的严格模式会因为未处理的Promise拒绝触发报错。
• 另外，fetch只有网络层面的错误才会进入.catch()，如果API返回HTTP错误（比如404、401权限问题），fetch不会主动抛出错误，这时候你依然会尝试解析JSON，大概率会触发新的报错。

修复方案：用try/catch统一处理异步错误 #

把fetchData改成下面的写法，同时加入HTTP响应状态检查：

const fetchData = async() => {
  try {
    const res = await fetch(`https://avwx.rest/api/metar/${text}`, {
      headers : {"Authorization": "key"}
    });
    // 检查HTTP响应是否成功（状态码200-299）
    if (!res.ok) {
      throw new Error(`请求失败，状态码：${res.status}`);
    }
    const rawJSON = await res.json();
    console.log(rawJSON);
    setData(rawJSON);
  } catch (error) {
    console.error('数据获取失败:', error);
    alert('获取气象数据失败，请检查机场代码是否正确或稍后重试');
  }
}

2. 初始状态下访问data.raw导致的渲染错误 #

你的data初始值是空字符串''，在组件首次渲染或者还没拿到API数据时，data.raw相当于访问''.raw，结果是undefined。开发环境可能会忽略这个问题，但生产构建时React的严格检查会因为尝试渲染undefined或者访问不存在的属性而报错。

修复方案：调整初始状态并添加渲染判断 #

1. 把data的初始值改成null：

const [data, setData] = useState(null)

2. 渲染时先判断data是否存在，再访问raw属性：

{data ? <p className="data">{JSON.stringify(data.raw, null, 2)}</p> : null}

额外建议 #

• 运行npm run build时，仔细查看终端输出的具体错误信息，这能帮你更快定位问题（比如是否还有其他ESLint语法错误）。
• 你的react-scripts版本是5.0.0，这个版本在生产构建时的错误检查比旧版本更严格，很多开发环境能忽略的细节问题都会在构建时暴露出来。

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