ReferenceError: navigator is not defined

[korczis]

Hi There,
I am trying to use GraphiQL with https://github.com/erikras/react-redux-universal-hot-example but I am getting following error:

error given was: ReferenceError: navigator is not defined
[1]     at /Users/tomaskorcak/dev/the-scratch/node_modules/codemirror/lib/codemirror.js:24:19
[1]     at userAgent (/Users/tomaskorcak/dev/the-scratch/node_modules/codemirror/lib/codemirror.js:12:22)
[1]     at Object.<anonymous> (/Users/tomaskorcak/dev/the-scratch/node_modules/codemirror/lib/codemirror.js:17:3)
[1]     at Module._compile (module.js:413:34)
[1]     at Module._extensions..js (module.js:422:10)
[1]     at require.extensions.(anonymous function) (/Users/tomaskorcak/dev/the-scratch/node_modules/babel-core/lib/api/register/node.js:214:7)
[1]     at Object._module3.default._extensions.(anonymous function) [as .js] (/Users/tomaskorcak/dev/the-scratch/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:250:71)
[1]     at Module.load (module.js:357:32)
[1]     at Module._load (module.js:314:12)
[1]     at Function.module._load (/Users/tomaskorcak/dev/the-scratch/node_modules/piping/lib/launcher.js:32:16)

Any ideas what can be causing this? Or how to troubleshoot this? I am running out of ideas.

[korczis]

I somehow solved it in following hacky way.

import React, {Component} from 'react';

export default class GraphQL extends Component {
  render() {
    const GraphiQL = require('graphiql');

    function graphQLFetcher(graphQLParams) {
      return fetch(window.location.origin + '/api/graphql', {
        method: 'post',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(graphQLParams),
      }).then(response => response.json());
    }

    return (
      <div style={{width: '100%', height: 'calc(100% - 55px)', position: 'absolute'}}>
        <GraphiQL
          fetcher={graphQLFetcher}
        />
      </div>
    );
  }
}

[leebyron]

Thanks for the report. I'm having trouble reproducing this. What browser are you using?

[danez]

I have the same problem.
It happens because codemirror can not be rendered in nodeJS when doing serverside rendering.
codemirror/codemirror5#3701

I fixed it this way:

import React, { Component } from 'react';
let GraphiQL;

function graphQLFetcher(graphQLParams) { ... }

export default class Graph extends Component {

    componentDidMount() {
        // Hack for serverside rendering
        GraphiQL = require('graphiql');
    }

    render() {
        if (!GraphiQL) return null;

        return <GraphiQL fetcher={graphQLFetcher} />;
    }
}

[feih]

Bump - I am having the same issue when render it. And above alternatives doesn't seem to work.

'use strict';
var React = require('react');
var ctx = require('src/utils/context');
import GraphiQL from 'graphiql';

class GraphiQLPageContent extends React.Component {

    render() {

        console.log("inside graphiQL!");

        function graphQLFetcher(graphQLParams) {
            return fetch(window.location.origin + '/api/graphql', {
                method: 'post',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(graphQLParams),
            }).then(response => response.json());
        }

        return (
            <div style={{width: '100%', height: 'calc(100% - 55px)', position: 'absolute'}}>
                <GraphiQL
                    fetcher={graphQLFetcher}
                />
            </div>
        );
    }
}

module.exports = GraphiQLPageContent;