未捕获的语法错误：索引中的意外标记“<”。html

Question

我想将 google map 将服务包含到我的应用程序中，并且在我的index.html文件中出现错误：

Uncaught SyntaxError: Unexpected token '<' (at js?key=${process.env.GOOGLE_MAP_API_KEY}&libraries=places&callback=initAutocomplete`}:1:1) 。

您可以看到我正在使用反引号将 google map API 密钥添加到 src url 中。 但是我怎么会有关于<这里的错误？

index.html文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta."description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" 
      rel="stylesheet" 
      integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" 
      crossorigin="anonymous"
    />
    
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <script async
            src={`https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_MAP_API_KEY}&libraries=places&callback=initAutocomplete`}>
    </script>
    <script>
      let autocomplete;
      function initAutoComplete() {
          autocomplete = new google.maps.places.Autocomplete(
              document.getElementById('autocomplete'),
              {
                  types: ['geocode'],
                  componentRestrictions: {'country': ['NL', 'CN', 'US']},
                  fields: ['place_id', 'geometry', 'name'],
              },
          )
      }
  </script>
    <div id="root"></div>
  </body>
</html>