React-ace: 使用 webpack 构建时如何修复“未定义窗口”？

创建于 2016-11-25 · 7评论 · 资料来源: securingsincity/react-ace

tks

资料来源

levi0913

👍7

最有用的评论

您可以轻松使用存根

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 于 2017-03-08

👍13 🎉2

所有7条评论

同样的问题在这里。

oychao 于 2016-11-29

尝试通过玩笑进行测试时，我遇到了同样的问题。

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)

garetmckinley 于 2016-12-09

https://github.com/thlorenz/brace/issues/40#issuecomment-153394160 ==> 如果有人想尝试

ardok 于 2017-02-06

我想确保我理解。你们都在服务器上渲染吗？或者只是一个传统的 webpack 构建？

securingsincity 于 2017-02-16

您可以轻松使用存根

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 于 2017-03-08

👍13 🎉2

@jnoleau它有效。但是我想知道是否有更好的方法来解决这个问题？

maxlivinci 于 2017-04-08

这有效，但要注意：不要在require(...)语句中使用变量，因为这会触发 WebPack 加载模块的整个子目录。例如

OK（加载一个模块）：

require('brace/theme/github');

BAD（加载所有主题模块）：

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

ljwagerfield 于 2017-10-29

👍3

此页面是否有帮助？

0 / 5 - 0 等级

React-ace: 使用 webpack 构建时如何修复“未定义窗口”？

最有用的评论

所有7条评论

相关问题