React-ace: bagaimana cara memperbaiki "jendela tidak ditentukan" saat menggunakan webpack build?

Pertanyaan yang sama di sini.

Saya mengalami masalah yang sama ketika mencoba menguji melalui lelucon.

ReferenceError: window is not defined

  at node_modules/react-ace/node_modules/brace/index.js:18673:26
  at _acequire (node_modules/react-ace/node_modules/brace/index.js:88:37)
  at Object.acequire (node_modules/react-ace/node_modules/brace/index.js:93:26)
  at node_modules/react-ace/node_modules/brace/index.js:18671:21
  at Object.<anonymous> (node_modules/react-ace/node_modules/brace/index.js:18678:15)
  at Object.<anonymous> (node_modules/react-ace/lib/ace.js:11:14)

https://github.com/thlorenz/brace/issues/40#issuecomment-153394160 ==> jika ada yang ingin mencoba

Saya ingin memastikan saya mengerti. Apakah Anda semua rendering di server? Atau hanya pembuatan webpack tradisional?

Anda dapat dengan mudah menggunakan rintisan

const Editor = (props) => {
  if (typeof window !== 'undefined') {
    const Ace = require('react-ace').default;
    require('brace/mode/javascript');
    require('brace/theme/github');

    return <Ace {...props}/>
  }

  return null;
}

//use it
<Editor mode="javascript" theme="github" value="const foo = 42;" />

Dan jika Anda ingin kode isomorfik (untuk menghapus peringatan karena di sini di sisi server kami memiliki null dan di sisi klien AceEditor ), Anda dapat membungkusnya seperti ini:

class IsomorphicEditor extends React.Component {
  state = {mounted: false};

  componentDidMount() {
    this.setState({mounted: true});
  }

  render = () => (this.state.mounted ? <Editor {...this.props} /> : null);
}

@jnoleau Berhasil . Tetapi saya bertanya-tanya apakah ada cara yang lebih baik untuk menyelesaikan masalah ini?

Ini berfungsi tetapi berhati-hatilah: jangan gunakan variabel dalam pernyataan require(...) , karena ini akan memicu WebPack untuk memuat seluruh subdirektori modul. Misalnya

OK (memuat satu modul):

require('brace/theme/github');

BURUK (memuat semua modul tema):

const theme = 'github';
require('brace/theme/' + theme);