graphql-request icon indicating copy to clipboard operation
graphql-request copied to clipboard

Uncaught SyntaxError: import not found: GraphQLClient

Open styrken opened this issue 2 years ago • 0 comments

Hi,

I am trying to use graphql-request in my stimulus controller, but I am getting this error in browser console:

Uncaught SyntaxError: import not found: GraphQLClient.

Controller looks like this:

import { Controller } from "@hotwired/stimulus";
import { GraphQLClient, gql } from "graphql-request";

const query = gql`
  query users {
    allUsers {
      email
    }
  }
`;

/**
 * Vehicle Form Controller
 *
 * Used to manage the dynamic parts of the vehicle form
 */
export default class extends Controller {
  connect() {
    console.log("Hello World");

    const client = new GraphQLClient("http://localhost:5001/graphql", {
      headers: {},
    });
    client.request(query, {}).then((data) => console.log(data));
  }
}

To have it load the right imports, i have made an importmap in my HTML (pug-template).

  script()&attributes({ 'type': 'importmap'}).
    {
      "imports": {
        "@hotwired/stimulus": "/vendor/@hotwired/stimulus/dist/stimulus.js",
        "graphql-request": "/vendor/graphql-request/dist/index.js"
      }
    }

Why do i get Uncaught SyntaxError: import not found: GraphQLClient.

Is the lib not compatible with esnext?

styrken avatar Aug 10 '22 05:08 styrken