Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

react-codemirror2 - add support for server-side rendering #22

Closed
dorianpula opened this issue Oct 16, 2017 · 9 comments
Closed

react-codemirror2 - add support for server-side rendering #22

dorianpula opened this issue Oct 16, 2017 · 9 comments

Comments

@dorianpula
Copy link

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

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
artkravchenko added a commit to Lokiedu/libertysoil-site that referenced this issue Oct 16, 2017
react-codemirror isn't maintained properly, look at
JedWatson/react-codemirror#126

Keep react-codemirror as a dependency since it's a peer dependency of react-codemirror2.

Don't render CodeMirror at the server-side since SSR isn't supported at all.
Look at scniro/react-codemirror2#22 for details.
@scniro
Copy link
Owner

scniro commented Oct 16, 2017

@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 added a commit that referenced this issue Oct 17, 2017
@scniro
Copy link
Owner

scniro commented Oct 17, 2017

@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
Copy link

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

artkravchenko added a commit to Lokiedu/libertysoil-site that referenced this issue Oct 19, 2017
react-codemirror isn't maintained properly, look at
JedWatson/react-codemirror#126

Keep react-codemirror as a dependency since it's a peer dependency of react-codemirror2.

Don't render CodeMirror at the server-side since SSR isn't supported at all.
Look at scniro/react-codemirror2#22 for details.
@scniro
Copy link
Owner

scniro commented Oct 19, 2017

@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 added a commit that referenced this issue Oct 19, 2017
@scniro
Copy link
Owner

scniro commented Oct 19, 2017

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

artkravchenko added a commit to Lokiedu/libertysoil-site that referenced this issue Oct 19, 2017
react-codemirror isn't maintained properly, look at
JedWatson/react-codemirror#126

Keep react-codemirror as a dependency since it's a peer dependency of react-codemirror2.

Don't render CodeMirror at the server-side since SSR isn't supported at all.
Look at scniro/react-codemirror2#22 for details.
artkravchenko added a commit to Lokiedu/libertysoil-site that referenced this issue Oct 19, 2017
react-codemirror isn't maintained properly, look at
JedWatson/react-codemirror#126

Keep react-codemirror as a dependency since it's a peer dependency of react-codemirror2.

Don't render CodeMirror at the server-side since SSR isn't supported at all.
Look at scniro/react-codemirror2#22 for details.
@scniro
Copy link
Owner

scniro commented Oct 23, 2017

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

@dorianpula
Copy link
Author

@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
Copy link
Owner

scniro commented Nov 14, 2017

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

artkravchenko added a commit to Lokiedu/libertysoil-site that referenced this issue Dec 23, 2017
react-codemirror isn't maintained properly, look at
JedWatson/react-codemirror#126

Keep react-codemirror as a dependency since it's a peer dependency of react-codemirror2.

Don't render CodeMirror at the server-side since SSR isn't supported at all.
Look at scniro/react-codemirror2#22 for details.
artkravchenko added a commit to Lokiedu/libertysoil-site that referenced this issue Dec 23, 2017
react-codemirror isn't maintained properly, look at
JedWatson/react-codemirror#126

Keep react-codemirror as a dependency since it's a peer dependency of react-codemirror2.

Don't render CodeMirror at the server-side since SSR isn't supported at all.
Look at scniro/react-codemirror2#22 for details.
artkravchenko added a commit to Lokiedu/libertysoil-site that referenced this issue Dec 23, 2017
react-codemirror isn't maintained properly, look at
JedWatson/react-codemirror#126

Keep react-codemirror as a dependency since it's a peer dependency of react-codemirror2.

Don't render CodeMirror at the server-side since SSR isn't supported at all.
Look at scniro/react-codemirror2#22 for details.
artkravchenko added a commit to Lokiedu/libertysoil-site that referenced this issue Dec 23, 2017
react-codemirror isn't maintained properly, look at
JedWatson/react-codemirror#126

Keep react-codemirror as a dependency since it's a peer dependency of react-codemirror2.

Don't render CodeMirror at the server-side since SSR isn't supported at all.
Look at scniro/react-codemirror2#22 for details.
@chaddjohnson
Copy link

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;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants