React-ace: как исправить "окно не определено" при использовании сборки webpack?

Тот же вопрос здесь.

У меня такая же проблема при попытке протестировать с помощью шутки.

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 ==> если кто-нибудь хочет попробовать

Я хочу убедиться, что понимаю. Вы все делаете рендеринг на сервере? Или просто традиционная сборка веб-пакетов?

Можно запросто использовать заглушку

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

И если вам нужен изоморфный код (чтобы удалить предупреждение, потому что здесь на стороне сервера у нас есть null а на стороне клиента - AceEditor ), вы можете обернуть его следующим образом:

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

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

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

@jnoleau Это работает. Но мне интересно, есть ли способ лучше решить эту проблему?

Это работает, но имейте в виду require(...) , так как это заставит WebPack загружать целые подкаталоги модулей. Например

ОК (загружает один модуль):

require('brace/theme/github');

ПЛОХО (загружает все модули темы):

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