Был бы рад получить за это пиар.

Поскольку ваши зависимости не созданы для рендеринга на стороне сервера, это будет довольно сложно. На данный момент я бы порекомендовал пользователям просто использовать клиентские компоненты React, если они хотят использовать вашу библиотеку, что я и сделал. Но я внес небольшие изменения в свою вилку, которые должны улучшить производительность. Также этот форк не оптимизирован для пиара. Если хочешь, я могу приготовить.

Я столкнулся с этой же проблемой. Одно из возможных решений - натянуть скобу другим способом отдельно от основной связки. В любом случае клиенту требуется javascript, так что по крайней мере вы можете отобразить остальную часть страницы.

из того, что я видел, Ace использует DOM api напрямую для создания редактора. Разве нельзя было бы использовать что-то вроде jsdom для имитации среды браузера на сервере?

NextJS предлагает отличную поддержку для приложений с рендерингом на стороне сервера React.JS. У них есть динамическая функция, позволяющая импортировать только клиентскую часть.

Реализация, которую я использую.
Компонент на стороне клиента

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

`

Как импортировать

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

есть ли побочный эффект от использования "next / dynamic"? или это нормально использовать ..

Я не видел никаких проблем, должным образом отметил, что я следую руководству Next, JS framework о том, как развиваться.

Очень грустный(((

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

Очень интересно в этом. Мы используем Ace, и нам он нравится, но пока не нашли способа использовать его с Gatsby.

@ saulflores95 имеет правильную идею, в моем случае режим и тема также должны быть динамически импортированы. Но когда я это сделал, я не думаю, что они были импортированы до того, как был установлен компонент react ace по умолчанию, поэтому я не увидел свою тему. Мне пришлось дождаться основного импорта, прежде чем я импортировал тему и режим сборки ace. Это версия 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,
  },
);

841 был объединен с 9.0.0 и должен решить проблему поддержки рендеринга на стороне сервера. спасибо @gchallen

Как и к вашему сведению, мой PR не поддерживает полную SSR. Это просто предотвращает отказ react-ace при использовании на сервере. Все, что будет отображаться на сервере, является пустым div которое Ace заполнит после загрузки на клиенте.

Я работал над более полной поддержкой SSR, что означает фактическое создание разметки на сервере, аналогичной той, которую вы найдете на клиенте после загрузки Ace. Это нетривиально, поскольку Ace выполняет довольно неприятные и запутанные расчеты макета при загрузке, которые необходимо будет смоделировать в jsdom. Поэтому для получения чего-то похожего на то, что вы видите на стороне клиента, вероятно, потребуется передать некоторые из этих констант макета.

В любом случае - это определенно шаг в правильном направлении. Теперь, когда react-ace не взрывает SSR, должна появиться возможность реализовать более сложные подходы SSR с использованием компонента оболочки.

Спасибо @JohnGrisham , ваше решение сработало для меня. Мне пришлось заменить импорт на требует, однако

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"  />

@ saulflores95 имеет правильную идею, в моем случае режим и тема также должны быть динамически импортированы. Но когда я это сделал, я не думаю, что они были импортированы до того, как был установлен компонент react ace по умолчанию, поэтому я не увидел свою тему. Мне пришлось дождаться основного импорта, прежде чем я импортировал тему и режим сборки ace. Это версия 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,
  },
);

Работает частично, режим и тема отсутствуют (также пробовали использовать require вместо import ).

• Windows 10 с WSL2
• [email protected] (и [email protected] )
• [email protected]
• [email protected]
• [email protected]

Начиная с npm run dev (который запускает next dev ).

Консоль Google Chrome 87 выводит эту ошибку:

Невозможно определить путь к ace из скрипта src, используйте ace.config.set ('basePath', 'path'), чтобы включить динамическую загрузку режимов и тем, или с помощью webpack используйте ace / webpack-resolver

Также заметил код статуса 404 для этого запроса:

• http: // локальный : 3000 / курсы / режим-javascript.js
• http: // локальный : 3000 / курсы / тема-monakai.js

Если вместо этого я использую другой подход:

// 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 />
}

Я получаю ту же ошибку, но немного другие ошибки 404:

• http: // локальный : 3000 / курсы / тема-monakai.js
• http: // localhost : 3000 / курсы / worker-javascript.js (это новый)