使用Groq API时React编译失败，如何修复该错误？

在React应用中集成Groq AI实现对话功能时，遇到以下编译错误：

./node_modules/groq-sdk/index.js 78:32
Module parse failed: Unexpected token (78:32)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     super({
|       baseURL: options.baseURL,
>       timeout: options.timeout ?? 60000 /* 1 minute */,
|       httpAgent: options.httpAgent,
|       maxRetries: options.maxRetries,

已按照Groq官方文档步骤操作，仍未解决问题，使用的React组件代码如下：

import React, { useEffect } from "react";
import Groq from "groq-sdk";

function AI() {
  const groq = new Groq({
    apiKey: "<MY API KEY HERE>",
  });

  async function main() {
    const chatCompletion = await getGroqChatCompletion();
    // Print the completion returned by the LLM.
    console.log(chatCompletion.choices[0]?.message?.content || "");
  }

  async function getGroqChatCompletion() {
    return groq.chat.completions.create({
      messages: [
        {
          role: "user",
          content: "Explain the importance of fast language models",
        },
      ],
      model: "llama3-8b-8192",
    });
  }

  main();

  return (
    <section className="my-5">
      <div className="my-2">
        <h1>Coming Soon!</h1>
      </div>
    </section>
  );
}

export default AI;

问题原因 #

错误指向的??是空值合并运算符，属于ES2020新增语法。核心问题在于：

• Groq SDK内部使用了该语法，但你的React项目Babel配置未启用ES2020语法支持，或者未配置Babel处理node_modules目录下的groq-sdk包（默认Babel会跳过node_modules的编译）。

解决方法 #

情况1：Create React App（CRA）项目 #

CRA默认不允许直接修改Babel配置，需借助react-app-rewired覆盖配置：

1. 安装依赖：

   npm install --save-dev react-app-rewired customize-cra
   

2. 项目根目录创建config-overrides.js文件，添加内容：

   const { override, addBabelPlugins, addBabelPresets } = require('customize-cra');
   
   module.exports = override(
     addBabelPlugins('@babel/plugin-proposal-nullish-coalescing-operator'),
     addBabelPresets([
       '@babel/preset-env',
       {
         targets: { browsers: ['>0.25%', 'not dead'] },
         useBuiltIns: 'usage',
         corejs: 3
       }
     ])
   );
   

3. 修改package.json启动脚本：

   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test"
   }
   

4. 重启开发服务器重新编译。

情况2：自定义Babel配置的非CRA项目 #

1. 安装必要插件：

   npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator
   

2. 修改babel.config.json或.babelrc：

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "targets": { "browsers": ["last 2 versions", "not ie <= 11"] },
           "useBuiltIns": "usage",
           "corejs": 3
         }
       ],
       "@babel/preset-react"
     ],
     "plugins": [
       "@babel/plugin-proposal-nullish-coalescing-operator",
       "@babel/plugin-proposal-optional-chaining"
     ],
     "include": ["./src/**/*", "./node_modules/groq-sdk/**/*"]
   }
   

   include配置让Babel处理groq-sdk代码，确保语法被转译。

额外优化：修复组件无限渲染问题 #

组件中直接调用main()会导致每次渲染都执行，引发无限循环，需将调用放到useEffect中：

useEffect(() => {
  main();
}, []); // 空依赖数组确保仅在组件挂载时执行一次

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