ReferenceError: navigator is not defined

[mattmacpherson]

ReferenceError: navigator is not defined W20161022-17:29:38.375(-4)? (STDERR) at /Users/mattmacpherson/Code/project/node_modules/codemirror/lib/codemirror.js:24:19 W20161022-17:29:38.375(-4)? (STDERR) at userAgent (/Users/mattmacpherson/Code/project/node_modules/codemirror/lib/codemirror.js:12:22) W20161022-17:29:38.376(-4)? (STDERR) at Object.<anonymous> (/Users/mattmacpherson/Code/project/node_modules/codemirror/lib/codemirror.js:17:3) W20161022-17:29:38.376(-4)? (STDERR) at Module._compile (module.js:409:26) W20161022-17:29:38.376(-4)? (STDERR) at Object.Module._extensions..js (module.js:416:10) W20161022-17:29:38.376(-4)? (STDERR) at Module.load (module.js:343:32) W20161022-17:29:38.377(-4)? (STDERR) at Module.Mp.load (/Users/mattmacpherson/.meteor/packages/babel-compiler/.6.9.1_1.15j1r1l++os+web.browser+web.cordova/npm/node_modules/reify/node/runtime.js:16:23) W20161022-17:29:38.377(-4)? (STDERR) at Function.Module._load (module.js:300:12) W20161022-17:29:38.378(-4)? (STDERR) at Module.require (module.js:353:17) W20161022-17:29:38.378(-4)? (STDERR) at require (internal/module.js:12:17)

I only get this error when requiring modes:

require('codemirror/mode/javascript/javascript'); require('codemirror/mode/xml/xml'); require('codemirror/mode/markdown/markdown');

[wrannaman]

Are you using server side rendered react? There won't be a navigator until the doc is ready.

[sslotsky]

This was supposedly fixed but still happens as noted in #21

I would also like to use this package with SSR and currently cannot for this reason.

[sslotsky]

Seems it was removed here:

4624b3d#diff-2c23fe372e330148850d3aa80cedc390

[Salakar]

@method-x @sslotsky had the same issue here using next.js and SSR - I've worked around this issue by importing as follows:

let CodeMirror = null;
if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
  CodeMirror = require('react-codemirror');
  require('codemirror/mode/yaml/yaml');
  require('codemirror/mode/dockerfile/dockerfile');
}

And then rendering:

// render
   { CodeMirror && <CodeMirror ... /> }

After which it's only the client now that renders, on the server it's ignored. Does the job 👍

[sslotsky]

@Salakar Thanks that worked fantastically!

For what it's worth, require('react-codemirror') itself does not produce the error. Just including the modes does. So you could make that first require unconditional and render unconditionally as well.

[ErwinSalas]

I have a similar error, when i try to use react-player dependency, someone could helpme
ReferenceError: navigator is not defined
at FilePlayer.shouldUseHLS (C:\Users\Pavilion\Documents\Proyectos\WebAppRioDanta\node_modules\react-player\lib\players\FilePlayer.js:173:41
)
at FilePlayer.render (C:\Users\Pavilion\Documents\Proyectos\WebAppRioDanta\node_modules\react-player\lib\players\FilePlayer.js:268:25)
at resolve (C:\Users\Pavilion\Documents\Proyectos\WebAppRioDanta\node_modules\react-dom\cjs\react-dom-server.node.development.js:2149:18)
at ReactDOMServerRenderer.render (C:\Users\Pavilion\Documents\Proyectos\WebAppRioDanta\node_modules\react-dom\cjs\react-dom-server.node.dev
elopment.js:2260:22)
at ReactDOMServerRenderer.read (C:\Users\Pavilion\Documents\Proyectos\WebAppRioDanta\node_modules\react-dom\cjs\react-dom-server.node.devel
opment.js:2234:19)
at renderToString (C:\Users\Pavilion\Documents\Proyectos\WebAppRioDanta\node_modules\react-dom\cjs\react-dom-server.node.development.js:250
1:25)
at renderPage (C:\Users\Pavilion\Documents\Proyectos\WebAppRioDanta\node_modules\next\dist\server\render.js:174:26)
at Function.getInitialProps (C:\Users\Pavilion\Documents\Proyectos\WebAppRioDanta\node_modules\next\dist\server\document.js:83:25)
at _callee$ (C:\Users\Pavilion\Documents\Proyectos\WebAppRioDanta\node_modules\next\dist\lib\utils.js:36:30)
at tryCatch (C:\Users\Pavilion\Documents\Proyectos\WebAppRioDanta\node_modules\regenerator-runtime\runtime.js:62:40

[jflewis]

It seems the trick from above no longer works in NextJs. This is a terrible hack but the following works for now (if there is a better way in nextjs to do this please share).

In the imports/requires

let CodeMirror = null
try {
  navigator
  CodeMirror = require('react-codemirror')
  require('codemirror/mode/htmlmixed/htmlmixed')
  require('codemirror/mode/handlebars/handlebars')
} catch (error) {}

and in the render method

// render
   { CodeMirror && <CodeMirror ... /> }

[x5engine]

thank you :)

[songyule]

if you are using NextJS, maybe you can use this easier way

import dynamic from 'next/dynamic';
const CodeMirror = dynamic(() => import('react-codemirror'), { ssr: false });

[prashantchothani]

@songyule Can you please help me with the full code where it is used please ?

[rohitninawe]

Thanks @Salakar and @sslotsky . works for me as well

[sombreroEnPuntas]

if you are using NextJS, maybe you can use this easier way

import dynamic from 'next/dynamic';
const CodeMirror = dynamic(() => import('react-codemirror'), { ssr: false });

Something like this should work, @prashantchothani

import React, { useState } from 'react'
import dynamic from 'next/dynamic'

import 'codemirror/lib/codemirror.css'

const CodeMirror = dynamic(() => {
  import('codemirror/mode/javascript/javascript')
  return import('react-codemirror')
}, { ssr: false })

export const CodeEditor = () => {
  const [code, setCode] = useState(null)

  const options = { lineNumbers: true, mode: 'javascript' }

  return CodeMirror && <CodeMirror
    onChange={code => setCode(code)}
    options={options}
    value={code}
  />
}

export default CodeEditor

[prashantchothani]

Thanks @sombreroEnPuntas It worked

[saravanan-trika]

react-codemirror2 this method working.

import { Controlled as CodeMirror } from "react-codemirror2";

let modeLoaded = false
if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
require('codemirror/mode/javascript/javascript')
modeLoaded = true
}
const Editor = (props) => {
const options = {
autoCloseBrackets: true,
lineWrapping: true,
mode: language,
}
if (modeLoaded) options.mode = 'javascript'

return (
<CodeMirror
onBeforeChange={handleChange}
onKeyDown = {handleKeyup}
value={value}
className={"demo"}
options={options}
/>
)
}