No support for server-side rendering #27

mathew-kurian · 2015-07-23T06:16:11Z

No description provided.

securingsincity · 2015-07-26T18:49:59Z

Would be happy to have a PR for this.

mathew-kurian · 2015-07-27T04:51:16Z

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 · 2015-12-15T04:41:31Z

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 · 2015-12-17T10:27:31Z

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 · 2018-05-29T20:22:57Z

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 · 2018-07-24T11:21:03Z

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

saulflores95 · 2018-07-25T05:22:07Z

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

Fi1osof · 2018-12-09T08:22:08Z

Very sad(((

x5engine · 2019-01-14T01:47:52Z

JedWatson/react-codemirror#77

ezeev · 2019-04-08T16:48:02Z

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

JohnGrisham · 2020-03-11T22:10:27Z

@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 · 2020-05-23T02:47:35Z

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

gchallen · 2020-05-23T13:34:05Z

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 · 2020-12-03T21:03:09Z

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 · 2021-01-03T01:55:01Z

@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
node@12.16.2 (and npm@6.14.4)
next@10.0.4
reace-ace@9.2.1
ace-builds@1.4.12

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:

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)

nopol10 · 2021-07-24T15:29:28Z

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

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

export default function HelloWorld() {
return
}
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)

Was able to prevent that by setting the useWorker option to false

<CodeEditor
   ...
  setOptions={{
    useWorker: false,
  }}
/>

cc7gs · 2021-08-26T16:33:18Z

hi~,i'm use next and react-ace create playground

radikris · 2022-02-15T07:07:41Z

Hi guys!

I deployed my app on vercel, and my dynamic component, (dynamic Ace Code Editor) not showing up, although on my localhost it is working great, but on the deployed site it is rendered empty. Anyone experienced this strange behaviour, and found a solution for it?

(I have followed @saulflores95 idea, with next/dynamic)

danr-za · 2022-03-28T14:50:46Z

same as @radikris, production build is not rendering it.

saulflores95 · 2022-04-07T15:20:17Z

@radikris did you add the ssr:false key?

nealchen-cn · 2022-06-06T10:44:29Z

same as @radikris , any updates on the production build not rendering?

It worked and then stopped. Doesn't build because [react-ace (used by elastic UI) can't doesn't support server-side rendering][1] [1]: securingsincity/react-ace#27 (comment)

FilipPyrek · 2022-08-20T19:46:07Z

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

Worked for me 👍 but had to add await to all imports otherwise I was getting aforementioned errors like

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

GET http://localhost:3000/widget/mode-javascript.js net::ERR_ABORTED 404 (Not Found)

GET http://localhost:3000/widget/theme-textmate.js net::ERR_ABORTED 404 (Not Found)

async () => {
  const ace = await import('react-ace');
  await import('ace-builds/src-noconflict/mode-javascript');
  await import('ace-builds/src-noconflict/theme-textmate');
  return ace;
},

Also important step, as mentioned above, is to set useWorker: false

<Editor
   ...
  setOptions={{
    useWorker: false,
  }}
/>

securingsincity added enhancement help wanted labels Jul 26, 2015

securingsincity added the Hacktoberfest label Oct 2, 2016

securingsincity removed the Hacktoberfest label May 13, 2017

securingsincity added the hacktoberfest label Oct 13, 2017

securingsincity mentioned this issue Mar 12, 2018

react server rendering Error #394

Closed

urielhdz mentioned this issue Oct 15, 2019

gatsby build Building static HTML failed gatsbyjs/gatsby#18688

Closed

securingsincity removed the hacktoberfest label Jun 25, 2020

foderking mentioned this issue Apr 24, 2022

ReferenceError: window is not defined #1044

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

No support for server-side rendering #27

No support for server-side rendering #27

mathew-kurian commented Jul 23, 2015

securingsincity commented Jul 26, 2015

mathew-kurian commented Jul 27, 2015

psayre23 commented Dec 15, 2015

gabipurcaru commented Dec 17, 2015 •

edited

saulflores95 commented May 29, 2018 •

edited

prtvora99 commented Jul 24, 2018 •

edited

saulflores95 commented Jul 25, 2018

Fi1osof commented Dec 9, 2018

x5engine commented Jan 14, 2019

ezeev commented Apr 8, 2019

JohnGrisham commented Mar 11, 2020

securingsincity commented May 23, 2020

gchallen commented May 23, 2020 •

edited

pythonruss commented Dec 3, 2020

oncet commented Jan 3, 2021 •

edited

nopol10 commented Jul 24, 2021

cc7gs commented Aug 26, 2021 •

edited

radikris commented Feb 15, 2022

danr-za commented Mar 28, 2022

saulflores95 commented Apr 7, 2022

nealchen-cn commented Jun 6, 2022

FilipPyrek commented Aug 20, 2022 •

edited

No support for server-side rendering #27

No support for server-side rendering #27

Comments

mathew-kurian commented Jul 23, 2015

securingsincity commented Jul 26, 2015

mathew-kurian commented Jul 27, 2015

psayre23 commented Dec 15, 2015

gabipurcaru commented Dec 17, 2015 • edited

saulflores95 commented May 29, 2018 • edited

prtvora99 commented Jul 24, 2018 • edited

saulflores95 commented Jul 25, 2018

Fi1osof commented Dec 9, 2018

x5engine commented Jan 14, 2019

ezeev commented Apr 8, 2019

JohnGrisham commented Mar 11, 2020

securingsincity commented May 23, 2020

gchallen commented May 23, 2020 • edited

pythonruss commented Dec 3, 2020

oncet commented Jan 3, 2021 • edited

nopol10 commented Jul 24, 2021

cc7gs commented Aug 26, 2021 • edited

radikris commented Feb 15, 2022

danr-za commented Mar 28, 2022

saulflores95 commented Apr 7, 2022

nealchen-cn commented Jun 6, 2022

FilipPyrek commented Aug 20, 2022 • edited

gabipurcaru commented Dec 17, 2015 •

edited

saulflores95 commented May 29, 2018 •

edited

prtvora99 commented Jul 24, 2018 •

edited

gchallen commented May 23, 2020 •

edited

oncet commented Jan 3, 2021 •

edited

cc7gs commented Aug 26, 2021 •

edited

FilipPyrek commented Aug 20, 2022 •

edited