React-ace: No support for server-side rendering

[mathew-kurian]

[securingsincity]

Would be happy to have a PR for this.

[mathew-kurian]

Since your dependencies are not built for serverside rendering, it will be pretty challenging. For now, I would recommend users should just use a client-rendered React components if they want to use your lib which is what I did. But, I have made some minor modifications in my fork which should improve performance. Also, this fork is not optimized for a PR. If you want, I can prepare it.

[psayre23]

I just ran into this same issue. One possible solution is to pull in brace in another way separate from you main bundle. The client required javascript anyway, so at least you can render the rest of the page.

[gabipurcaru]

from what I've seen, Ace uses the DOM api directly to create the editor. Wouldn't it be possible to use something like jsdom to simulate a browser environment on the server?

[saulflores95]

NextJS offers great support for React.JS server-side rendered applications. They have the dynamic function where it allows you to import client side only.

The implementation that I use.
Client Side Component

import brace from 'brace';
import 'brace/mode/javascript';
import 'brace/mode/c_cpp';
import 'brace/theme/twilight';
import 'brace/theme/xcode';
import AceEditor from 'react-ace';

const textEditor = (props) => (
  <div>
    <AceEditor
        mode={props.lan}
        theme={props.theme}
        onChange={props.onChange}
        name="UNIQUE_ID_OF_DIV"
        editorProps={{
            $blockScrolling: true
        }}
        fontSize={21}
        height='80vh'
        width='100%'
    />
  </div>
)

export default textEditor

`

How to import

import React, { Component } from 'react
import dynamic from 'next/dynamic'
const TextEditor = dynamic(import('../components/textEditor'), {
  ssr: false
})

 export default class Index extends Component {
    ...
    render() {
        return (
          <div>
           <TextEditor lan='javascript' theme="twilight"/>
          </div>
        )
    }

[prtvora99]

is there any side effect of using "next/dynamic" ? or it's fine to use that..

[saulflores95]

I have not seen any issues, duly noted that I am following the Next,JS framework guidelines on how to develop.

[Fi1osof]

Very sad(((

[x5engine]

https://github.com/JedWatson/react-codemirror/issues/77

[ezeev]

Very interested in this. We are using Ace and love it but haven't found a way to use it with Gatsby yet.

[JohnGrisham]

@saulflores95 has the right idea in my case the mode and theme had to be dynamically imported as well. But when I did that I don't think those were being imported before the default react ace component was so I didn't see my theme. I had to await the main import before I imported the ace builds theme and mode. This is version 8.0.0.

const Editor = dynamic(
  async () => {
    const ace = await import('react-ace');
    import('ace-builds/src-noconflict/mode-javascript');
    import('ace-builds/src-noconflict/theme-textmate');
    return ace;
  },
  {
    // eslint-disable-next-line react/display-name
    loading: () => (
      <NoContent style={{ height: '520px' }}>
        <Spinner diameter={100} />
      </NoContent>
    ),
    ssr: false,
  },
);

[securingsincity]

841 was merged for 9.0.0 and should solve support for server-side rendering. thanks to @gchallen

[gchallen]

Just as an FYI, my PR does not enable full SSR. It just prevents react-ace from failing when used on the server. All that will be rendered on the server is blank div which Ace will fill in once it is loaded on the client.

I've been working on more complete support for SSR, meaning actually generating markup on the server similar to what you would find on the client after Ace loads. This is non-trivial, since Ace does some fairly nasty and convoluted layout calculations on load that will need to be mocked out in jsdom. So getting something that looks like what you'd see client side will probably require passing some of those layout constants.

Anyway—this is definitely a step in the right direction. Now that react-ace doesn't blow up SSR, it should be possible to implement more complex SSR approaches using a wrapper component.

[pythonruss]

Thank you @JohnGrisham, your solution worked for me. I did have to replace the imports with requires however

const Ace = dynamic(
  async () => {
    const ace = await import('react-ace');
    require('ace-builds/src-noconflict/mode-mysql');
    require('ace-builds/src-noconflict/theme-xcode');
    return ace;
  },
{
  loading: () => (
    <>Loading...</>
  ),
  ssr: false,
})
...
<Ace mode="mysql"  theme="xcode"  />

[oncet]

@saulflores95 has the right idea in my case the mode and theme had to be dynamically imported as well. But when I did that I don't think those were being imported before the default react ace component was so I didn't see my theme. I had to await the main import before I imported the ace builds theme and mode. This is version 8.0.0.

const Editor = dynamic(
  async () => {
    const ace = await import('react-ace');
    import('ace-builds/src-noconflict/mode-javascript');
    import('ace-builds/src-noconflict/theme-textmate');
    return ace;
  },
  {
    // eslint-disable-next-line react/display-name
    loading: () => (
      <NoContent style={{ height: '520px' }}>
        <Spinner diameter={100} />
      </NoContent>
    ),
    ssr: false,
  },
);

Working partially, mode and theme missing (also tried using require instead of import).

• Windows 10 with WSL2
• [email protected] (and [email protected])
• [email protected]
• [email protected]
• [email protected]

Starting with npm run dev (which runs next dev).

Google Chrome 87 console outputs this error:

Unable to infer path to ace from script src, use ace.config.set('basePath', 'path') to enable dynamic loading of modes and themes or with webpack use ace/webpack-resolver

Also noticed 404 status code for this requests:

• http://localhost:3000/courses/mode-javascript.js
• http://localhost:3000/courses/theme-monakai.js

If instead I use this other approach:

// code-editor.js
import AceEditor from 'react-ace'
import 'ace-builds/src-noconflict/mode-javascript'
import 'ace-builds/src-noconflict/theme-monokai'

const handleOnChange = () => {
  console.log('Changed!')
}

export default function CodeEditor() {
  return (
    <AceEditor
      mode="javascript"
      theme="monakai"
      onChange={handleOnChange}
      name="editor01"
    />
  )
}

// hello-world.js
import dynamic from 'next/dynamic'

const CodeEditor = dynamic(
  () => import('../../components/code-editor'),
  { ssr: false },
)

export default function HelloWorld() {
  return <CodeEditor />
}

I get the same error but slightly different 404 errors:

• http://localhost:3000/courses/theme-monakai.js
• http://localhost:3000/courses/worker-javascript.js (this one is new)