React-ace: ¿Cómo arreglar "la ventana no está definida" cuando se usa la compilación del paquete web?

La misma pregunta aquí.

Tengo el mismo problema cuando intento probar a través de broma.

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 ==> si alguien quiere probar

Quiero asegurarme de que lo entiendo. ¿Están todos renderizando en el servidor? ¿O simplemente una compilación de paquete web tradicional?

Puedes usar un talón fácilmente

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

Y si desea un código isomórfico (para eliminar la advertencia porque aquí en el lado del servidor tenemos null y en el lado del cliente un AceEditor ), puede envolverlo así:

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

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

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

@jnoleau Funciona. Pero me pregunto si hay una mejor manera de resolver este problema.

Esto funciona, pero tenga cuidado: no use variables en sus declaraciones require(...) , ya que esto hará que WebPack cargue subdirectorios completos de módulos. P.ej

OK (carga un módulo):

require('brace/theme/github');

MALO (carga todos los módulos de tema):

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