Реакция: неожиданный токен '<'

Question

Я использую Palm API для получения вопросов, сгенерированных ИИ, для веб-сайта. Прежде всего, когда я запускаю файл questionsai2.js, я постоянно получаю сообщение об ошибке:

          <div>
    ^

SyntaxError: Unexpected token '<'
    at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:119:18)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:468:14)
    at async link (node:internal/modules/esm/module_job:68:21)

Node.js v18.16.0

Вот код:

      import React, { useEffect, useState } from 'react';
import { google } from 'googleapis';
import { TextServiceClient } from '@google-ai/generativelanguage';
import ReactDOM from 'react-dom/client';

const MODEL_NAME = "models/text-bison-001";
const API_KEY = "this would be my actual api key"; // Replace with your actual API key

export const AiQuestionComponent = () => {
  const [questions, setQuestions] = useState([]);

  useEffect(() => {
    aiGeneratedQuestions().then((generatedQuestions) => {
      setQuestions(generatedQuestions);
    });
  }, []);

  async function aiGeneratedQuestions() {
    console.log('in aiGeneratedQuestions');
    const authClient = new google.auth.GoogleAuth({
      credentials: {
        access_token: API_KEY,
      },
      scopes: ['https://www.googleapis.com/auth/cloud-language'],
    });

    const textServiceClient = new TextServiceClient({
      authClient: await authClient.getClient(),
    });

    const input = ' ';
    const promptString = `input: Write me an AP biology exam with the following guidelines:
    Exam Format
    The AP Biology Exam has question types and point values that remain stable and consistent from year to year, so you and your students know what to expect on exam day.
    Section II: Free Response
    6 Questions | 1 hour 30 Minutes | 50% of Exam Score
    There are 2 long questions and 4 short questions. Long questions are worth 8–10 points each; short questions are worth 4 points each.
    The long questions ask students to:
    Interpret and evaluate experimental results
    Interpret and evaluate experimental results with graphing 
    The short-answer questions assess students’ understanding of the following:
    Scientific investigation
    Conceptual analysis
    Analysis of a model or visual representation
    Data analysis
    stucture questions like this:
    1. question here
    a) b) c) d) (questions 1 through 4)
    structure graphs like this:
    graph^
    |colname1|colname2|colname3
    |data1|data2|data3
    |data4|data5|data6
    input: ${input}
    output:`;

    const stopSequences = [];

    try {
      console.log('in try')
      const result = await textServiceClient.projects.locations.models.generateText({
        parent: MODEL_NAME,
        requestBody: {
          input: promptString,
          model: MODEL_NAME,
          temperature: 0.7,
          maxTokens: 20000,
          stopSequences: stopSequences,
        },
      });

      if (
        result[0] &&
        result[0].candidates &&
        result[0].candidates.length > 0
      ) {
        console.log('after if')
        const generatedText =
          result[0].candidates[0].output || result[0].candidates[0].text;
        console.log(generatedText);
        const questions = generatedText
          .split(/\*\*(Long|Short) Question \d+\*\* \(\d+ points\)/)
          .filter((question) => question.trim() !== '');

        const formattedQuestions = questions.map((question) => {
          const trimmedQuestion = question.trim();
          if (trimmedQuestion.startsWith('Long')) {
            const subQuestions = trimmedQuestion
              .split(/(\d+\.\s+.+)/)
              .filter((subQuestion) => subQuestion.trim() !== '');
            return subQuestions;
          }
          return trimmedQuestion;
        });
        console.log('AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA');
        console.log(formattedQuestions);
        return formattedQuestions;
      } else {
        console.log('No generated text found.');
        return [];
      }
    } catch (error) {
      console.error('Error:', error);
      return [];
    }
  }
  return (
    <div>
      <h1>Generated Questions</h1>
      <ul>
        {questions.map((question, index) => (
          <li key={index}>
            <p>{question}</p>
          </li>
        ))}
      </ul>
    </div>
  );
  
};

export default AiQuestionComponent;

Компонент вопроса входит в мой файл App.js.

У меня такое чувство, что это как-то связано с тем, что я неправильно использую реакцию, но я не уверен. Заранее спасибо!