ReferenceError: navigator is not defined

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');

[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 👍

[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 });