Akan dengan senang hati memiliki PR untuk ini.

Karena dependensi Anda tidak dibuat untuk rendering di sisi server, ini akan sangat menantang. Untuk saat ini, saya akan merekomendasikan pengguna hanya menggunakan komponen React yang dirender klien jika mereka ingin menggunakan lib Anda, itulah yang saya lakukan. Tapi, saya telah membuat beberapa modifikasi kecil di garpu saya yang seharusnya meningkatkan kinerja. Selain itu, garpu ini tidak dioptimalkan untuk PR. Kalau mau, saya bisa persiapkan.

Saya baru saja mengalami masalah yang sama. Salah satu solusi yang mungkin adalah menarik brace dengan cara lain yang terpisah dari bundel utama Anda. Klien tetap membutuhkan javascript, jadi setidaknya Anda dapat merender sisa halaman.

dari apa yang saya lihat, Ace menggunakan api DOM secara langsung untuk membuat editor. Bukankah mungkin menggunakan sesuatu seperti jsdom untuk mensimulasikan lingkungan browser di server?

NextJS menawarkan dukungan hebat untuk aplikasi yang dirender sisi server React.JS. Mereka memiliki fungsi dinamis yang memungkinkan Anda untuk mengimpor sisi klien saja.

Implementasi yang saya gunakan.
Komponen Sisi Klien

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

`

Bagaimana cara mengimpor

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

apakah ada efek samping dari penggunaan "berikutnya / dinamis"? atau tidak apa-apa menggunakannya ..

Saya belum melihat masalah apa pun, sepatutnya mencatat bahwa saya mengikuti panduan kerangka kerja JS Berikutnya tentang cara mengembangkan.

Sangat sedih(((

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

Sangat tertarik dengan ini. Kami menggunakan Ace dan menyukainya, tetapi belum menemukan cara untuk menggunakannya dengan Gatsby.

@ saulflores95 memiliki ide yang tepat dalam kasus saya mode dan tema harus diimpor secara dinamis juga. Tetapi ketika saya melakukan itu, saya tidak berpikir itu diimpor sebelum komponen default react ace jadi saya tidak melihat tema saya. Saya harus menunggu impor utama sebelum saya mengimpor tema dan mode ace builds. Ini adalah versi 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 telah digabungkan untuk 9.0.0 dan seharusnya menyelesaikan dukungan untuk rendering sisi server. terima kasih kepada @gchallen

Sama seperti FYI, PR saya tidak mengaktifkan SSR penuh. Ini hanya mencegah react-ace gagal saat digunakan di server. Semua yang akan ditampilkan di server kosong div yang akan diisi Ace setelah dimuat di klien.

Saya telah mengerjakan dukungan yang lebih lengkap untuk SSR, yang berarti benar-benar menghasilkan markup di server mirip dengan apa yang akan Anda temukan di klien setelah Ace dimuat. Ini tidak sepele, karena Ace melakukan beberapa perhitungan tata letak yang cukup buruk dan berbelit-belit pada beban yang perlu diejek di jsdom. Jadi mendapatkan sesuatu yang terlihat seperti apa yang Anda lihat di sisi klien mungkin akan membutuhkan penerusan beberapa konstanta tata letak tersebut.

Bagaimanapun — ini jelas merupakan langkah ke arah yang benar. Sekarang react-ace tidak meledakkan SSR, seharusnya mungkin untuk mengimplementasikan pendekatan SSR yang lebih kompleks menggunakan komponen pembungkus.

Terima kasih @JohnGrisham , solusi Anda berhasil untuk saya. Saya memang harus mengganti impor dengan persyaratan

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 memiliki ide yang tepat dalam kasus saya mode dan tema harus diimpor secara dinamis juga. Tetapi ketika saya melakukan itu, saya tidak berpikir itu diimpor sebelum komponen default react ace jadi saya tidak melihat tema saya. Saya harus menunggu impor utama sebelum saya mengimpor tema dan mode ace builds. Ini adalah versi 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,
  },
);

Bekerja sebagian, mode dan tema hilang (juga mencoba menggunakan require alih-alih import ).

• Windows 10 dengan WSL2
• [email protected] (dan [email protected] )
• [email protected]
• [email protected]
• [email protected]

Dimulai dengan npm run dev (yang menghasilkan next dev ).

Konsol Google Chrome 87 menghasilkan kesalahan ini:

Tidak dapat menyimpulkan jalur ke ace dari script src, gunakan ace.config.set ('basePath', 'path') untuk mengaktifkan pemuatan mode dan tema secara dinamis atau dengan webpack gunakan ace / webpack-resolver

Juga melihat kode status 404 untuk permintaan ini:

• http: // localhost : 3000 / kursus / mode-javascript.js
• http: // localhost : 3000 / kursus / tema-monakai.js

Jika sebaliknya saya menggunakan pendekatan lain ini:

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

Saya mendapatkan kesalahan yang sama tetapi kesalahan 404 yang sedikit berbeda:

• http: // localhost : 3000 / kursus / tema-monakai.js
• http: // localhost : 3000 / course / worker-javascript.js (yang ini baru)