ReferenceError: navigator is not defined about react-codemirror HOT 14 OPEN

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

from react-codemirror.

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

from react-codemirror.

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

from react-codemirror.

@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.

from react-codemirror.

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.

from react-codemirror.

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

from react-codemirror.

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}
/>
)
}

from react-codemirror.

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

from react-codemirror.

Seems it was removed here:

4624b3d#diff-2c23fe372e330148850d3aa80cedc390

from react-codemirror.

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 ... /> }

from react-codemirror.

thank you :)

from react-codemirror.

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

from react-codemirror.

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

from react-codemirror.

Thanks @sombreroEnPuntas It worked

from react-codemirror.