Open mattmacpherson opened 7 years ago
Are you using server side rendered react? There won't be a navigator until the doc is ready.
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.
@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 👍
@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.
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
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 ... /> }
thank you :)
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 });
@songyule Can you please help me with the full code where it is used please ?
Thanks @Salakar and @sslotsky . works for me as well
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
Thanks @sombreroEnPuntas It worked
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} /> ) }
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');