graphql-playground
graphql-playground copied to clipboard
graphql-playground-middleware-express - TypeError: expressPlayground is not a function
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.
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 }))
I'm getting "Property 'default' does not exist on type 'Register'."
Also getting Property 'default' does not exist on type 'Register'.
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" }));