Voyager fails to load (Unexpected reserved word at voyager:42:29: "await")

craigdrayton commented 5 months ago

I'm trying to use Voyager with a GraphQL Yoga server running Express:

import express from "express";
import { createSchema, createYoga } from "graphql-yoga";
import { express as voyagerMiddleware } from "graphql-voyager/middleware/index.js";
import typeDefs from "./generated/schema.json" assert { type: "json" };

const server = express();
server.use("/voyager", voyagerMiddleware({ endpointUrl: "/graphql" }));

const yoga = createYoga({ schema: createSchema({ typeDefs }) });
server.use(yoga.graphqlEndpoint, yoga);

server.listen(4000, () => {
  console.log("GraphQL Server is listening on http://localhost:4000/graphql");
});

When I try to access http://localhost:4000/voyager I get "Unexpected reserved word at voyager:42:29" error in console.


<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <title>GraphQL Voyager</title>
  <style>
    body {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }
    #voyager {
      height: 100vh;
    }
  </style>
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/graphql-voyager@2.0.0/dist/voyager.css"
  />
  <script src="https://cdn.jsdelivr.net/npm/graphql-voyager@2.0.0/dist/voyager.standalone.js"></script>
</head>
<body>
  <main id="voyager">
    <h1 style="text-align: center; color: #5d7e86;"> Loading... </h1>
  </main>
  <script type="module">
    window.addEventListener('load', function(event) {
      const response = fetch('/graphql', {
        method: 'post',
        headers: Object.assign({}, {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        }, {}),
        body: JSON.stringify({
          query: GraphQLVoyager.voyagerIntrospectionQuery,
        }),
        credentials: 'include',
      });
      const introspection = await response.json();

      GraphQLVoyager.init(document.getElementById('voyager'), {
        introspection,
        displayOptions: undefined,
      });
    })
  </script>
</body>
</html>

It's tripping up on the "await", which doesn't seem to be in an async function.

craigdrayton commented 5 months ago

Downgrading to v1.3.0 resolves the issue

danieldanielecki commented 5 months ago

For me the error is different Cannot start Docker Compose application. Reason: exit status 1, and on v1.3.0 I'm having

ERROR in ./src/components/variables.css
Module build failed (from ./node_modules/postcss-variables-loader/lib/index.js):
BrowserslistError: Unknown browser query `dead`

This project doesn't seem to be maintainted anymore...

macrozone commented 4 months ago

@LunaticMuch since you were the last that commited here, would you mind to see whats going on here? its a very tiny fix, but without that version 2 is broken

IvanGoncharov commented 2 months ago

Fixed on graphql-voyager@2.1.0

graphql-kit / graphql-voyager

Voyager fails to load (Unexpected reserved word at voyager:42:29: "await") #403