react-monaco-editor in Modal Component doesn't work

[AnitaTang]

I encounter this problem, 'The container has valid width and height while the editor's width and height are only 5px', I could not see any error in the console of DevTool。 [react-monaco-editor] component works well in other page in my project.
"react-monaco-editor": "^0.34.0", "monaco-editor": "^0.20.0".

Any help?Thanks.

[lmarklil]

I have same problem, and I found this problem is cause by Ant Design, you can try to unupgrade Ant Design to 4.23.1.

[ohhoney1]

add config automaticLayout: true , it works for me.

 <MonacoEditor
    width="800"
    height="600"
    language="javascript"
    theme="vs-dark"
    value={code}
    options={{ automaticLayout: true }}
  //...

[TimAstier]

Not sure if it's related but when using the component in my app with some custom css and webpack config, the editor was also rendering with a height of 5px, and I just realised that switching

<MonacoEditor
    width="800"
    height="600"
//...

to

<MonacoEditor
    width="800px"
    height="600px"
//...

made a difference 🤔

[zxq08]

添加配置automaticLayout: true，它对我有用。

 <MonacoEditor
    width="800"
    height="600"
    language="javascript"
    theme="vs-dark"
    value={code}
    options={{ automaticLayout: true }}
  //...

yes It's helpful! thank you!

[Mrtaochen]

我有同样的问题，我发现这个问题是由Ant Design引起的，你可以尝试将Ant Design取消升级到4.23.1。

同样的发现，但是目前没有找到具体是antd的什么原因引起的。