React-ace: how to fix "window is not defined" when use webpack build ?

[levi0913]

tks

[oychao]

Same question here.

[garetmckinley]

I'm having the same issue when trying to test via jest.

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)

[ardok]

https://github.com/thlorenz/brace/issues/40#issuecomment-153394160 ==> if anyone wanna try

[securingsincity]

I want to make sure i understand. Are you all rendering on the server? Or just a traditional webpack build?

[jnoleau]

You can easily use a stub

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

And if you want isomorphic code (to remove the warning because here on server side we have null and on client side an AceEditor) you could wrap it like this :

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

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

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

[maxlivinci]

@jnoleau It works. But I wonder if there is a better way to solve this problem?

[ljwagerfield]

This works but be warned: do not use variables in your require(...) statements, as this will trigger WebPack to load entire subdirectories of modules. E.g.

OK (loads one module):

require('brace/theme/github');

BAD (loads all theme modules):

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