react-codemirror2 - add support for server-side rendering

[dorianpula]

Description

As of version 2.0.2, react-codemirror2 breaks server-side rendering, due to the import of codemirror requiring browser-level. A server-side render app needs extensive workaround (such as dynamic imports) or separate server/client components to use react-codemirror2 in an isomorphic app. See an example of an error below.

Desired Outcome

Enable react-codemirror2 to handle import of codemirror from a node context as is the case with server-side rendering.

Potential Fixes

• using a textarea if in an environment that does not support codemirror: server-side or mobile
  • sample implementation available in react-code-mirror
• having a dummy codemirror implementation if no window/navigator global found.

Example Error:

> node dist/server/index.js

/home/dpula/projects/rookeries/node_modules/codemirror/lib/codemirror.js:18
var userAgent = navigator.userAgent;
                ^

ReferenceError: navigator is not defined
    at /home/dpula/projects/rookeries/node_modules/codemirror/lib/codemirror.js:18:17
    at userAgent (/home/dpula/projects/rookeries/node_modules/codemirror/lib/codemirror.js:11:82)
    at Object.<anonymous> (/home/dpula/projects/rookeries/node_modules/codemirror/lib/codemirror.js:14:2)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1

[scniro]

@dorianpula Thank you for opening this up, as well as including a stellar amount of detail! I am honing in on closing #20 which involves shipping the module with type defs. While I've been at it, I've taken the opportunity to re-working a lot of things. I'm planning for a 3.0.0 release which will, in addition to having strong types, ship with a notion of a Controlled and UnControlled variation of the component.

Uncontrolled will be a much simpler component. It'll basically wrap a DOM element and let codemirror do it's thing for the most part. My thought is that this approach will be taken to get up and running quickly.

Controlled will demand state management from the user, essentially hi-jacking codemirror and emulating changes to an in-memory DOM-less instance, then pumping out changes to the client. Based on your description above I suspect this will be want you are wanting to use.

I'm a day or so out from wrapping up and I'll let you know when it's available to try out.

[scniro]

@dorianpula This should now be fixed in 3.0.0.

I changed the core API a bit, please check out whats new in 3.0.0 to get up and running.

Please let me know if this is resolved! 😸

[indeyets]

@scniro it's definitely not solved, as react-codemirror2/index.js still has explicit var codemirror = require("codemirror");

[scniro]

@indeyets ah yes I do see that. What a pain. I am implementing the check as suggested, but for typings I need to import * as codemirror from 'codemirror';. I'll look into this now.

[scniro]

@indeyets @dorianpula Sorry for the unexpected issue. This should now be fixed in 3.0.2.

Basically TypeScript requires the import statement just for transpile time type checking, even if you don't want the library! I added a hacky gulp task to just remove the auto-generated require statement after the source is transpiled. The above mentioned navigator check remains in place. Not ideal, but It'll work for now...

Please let me know if resolved? (for real this time)

[scniro]

Closing for now, please re-open should this remain problematic

[dorianpula]

@scniro Thanks for the quick replies and the updates! (Sorry for not following up earlier.) I upgraded to the latest version, but I haven't attempted to add any server-side specific code to work around the codemirror import.

[scniro]

@dorianpula no worries! You should be all set, but please comment back should you experience any troubles 😎

[chaddjohnson]

This appears to still be a problem. I'm using the latest react-codemirror2 library with Next.js 10.0.x, and I'm seeing ReferenceError: navigator is not defined.

I was able to sloppily work around this like so:

import React from 'react';
import PropTypes from 'prop-types';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/xq-light.css';

// Workaround
const { Controlled: CodeMirror } =
  (typeof window !== 'undefined' && require('react-codemirror2')) || {};

// Workaround
if (typeof window !== 'undefined') {
  require('codemirror/mode/javascript/javascript');
}

const options = {
  mode: {
    name: 'javascript',
    json: true
  },
  theme: 'xq-light',
  lineNumbers: true
};

const CodeEditor = ({ markup, onChange }) => {
  const handleChange = (editor, data, value) => {
    onChange(value);
  };

  return (
    <CodeMirror value={markup} options={options} onChange={handleChange} />
  );
};

CodeEditor.propTypes = {
  markup: PropTypes.string.isRequired,
  onChange: PropTypes.func
};

CodeEditor.defaultProps = {
  onChange: () => {}
};

export default CodeEditor;