GraphQL playground is not displayed on localhost:4000

Question

Issue Summarization

I'm new in the GraphQL world, I'm using a beginners script to start the server and access the playground on localhost. When I visit it, I see an empty page with the word EOF as plain-text (End Of File).

What I've tried

• Unexpected while using graphql , alhtough this is an error during the query creation (In my case i can't see the playground at all)

index js

import { GraphQLServer } from 'graphql-yoga'

//Type Definitions (Schema)
const typeDefs = `
type Query {
    hello: String!
}
`

//Resolvers
const resolvers = {
    Query: {
        hello(){
            return 'This is my first query!'
        }
    }
}

const server = new GraphQLServer({
    typeDefs,
    resolvers
})

server.start(()=>{
    console.log(`server is up on: ${server.options.port}`)
})

Console Output

server is up on: 4000

Web Browser Output

EOF is being displayed as plain text, without any particular error message on the console.

my package.json

{
  "name": "graphql-basics",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "babel-node src/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "graphql-yoga": "^1.14.10"
  }
}