graphql-playground-middleware-express - TypeError: expressPlayground is not a function

[tatejones]

This issue pertains to the following package(s):

• [ ] GraphQL Playground - Electron App
• [ ] GraphQL Playground HTML
• [ ] GraphQL Playground
• [x ] GraphQL Playground Express Middleware
• [ ] GraphQL Playground Hapi Middleware
• [ ] GraphQL Playground Koa Middleware
• [ ] GraphQL Playground Lambda Middleware

What OS and OS version are you experiencing the issue(s) on?

Mac OS X

Running node 15.23 with ts-node/esm

"node --experimental-repl-await --loader=ts-node/esm --experimental-specifier-resolution=node"

What version of graphql-playground(-electron/-middleware) are you experiencing the issue(s) on?

1.7.22

What is the expected behavior?

import expressPlayground from "graphql-playground-middleware-express";

Expecting expressPlayground to be a function.

What is the actual behavior?

TypeError: expressPlayground is not a function

What steps may we take to reproduce the behavior?

import expressPlayground from "graphql-playground-middleware-express"; ....

const app = express(); app.get("/", expressPlayground({ endpoint: graphqlPath }));

.... tsc finds no issues with the index.d.ts of graphql-playground-middleware-express. It seems to be an issue with the compiled js file.

[Arif9878]

you can use graphql-playground-middleware-express like this

import expressPlayground from 'graphql-playground-middleware-express'
const graphQLPlayground = expressPlayground.default

app.get('/playground', graphQLPlayground({ endpoint: graphqlPath }))

[Eleveres]

I'm getting "Property 'default' does not exist on type 'Register'."

[AaronNGray]

Also getting Property 'default' does not exist on type 'Register'.

[itkach]

Looking at javascript in dist folder looks like this is a CommonJS module and this is not importable with the following tsconfig:

{
  "include": ["src/**/*"],
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "rootDir": "./src",
    "strict": true,
    "moduleResolution": "node",
    "typeRoots": ["./node_modules/@types", "../../node_modules/@types", "src/@types"],
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

I ended up removing dep on this package and just copied the middleware definition into my application like so:

import graphqlPlaygroundHtml from "graphql-playground-html";
const graphqlPlayground = function (
  options: graphqlPlaygroundHtml.MiddlewareOptions
) {
  return function (req, res, next) {
    res.setHeader("Content-Type", "text/html");
    const playground = graphqlPlaygroundHtml.renderPlaygroundPage(options);
    res.write(playground);
    res.end();
  };
};
app.get("/api/playground", graphqlPlayground({ endpoint: "/api" }));