codemirror widths and lefts are so large they push codemirror to right edge of browser

using babel and webpack-dev-server to bundle and serve the the rendered GraphiQL component. For some reason the margin-left and certain width style properties are set to almost the entire width of the screen so all i see is a blank space and then the first character of each code line up against the right side of the browser window

<div class="CodeMirror-sizer" style="margin-left: 1904px; margin-bottom: 0px; border-right-width: 30px; min-height: 675px; min-width: 619px; padding-right: 0px; padding-bottom: 0px;">
   <div ....>....
  </di>
</div>

[philiptzou]

I encountered the same problem recently. After dived into the source code of CodeMirror and fixed my issue I think it is better to share my experience here. In case someone else get stuck by this really weird, tricky issue.

TL;DR: Find a way to ensure graphiql.css is loaded before <GraphiQL /> get rendered. Be very careful when playing with Webpack code-splitting and GraphiQL at the same time.

My problem is highly related with the differences of the style processing between dev and prod of a customized version of start-react-app. I also used “code splitting” technique to split the GraphiQL and CodeMirror from the main bundle.

In general, in dev mode all styles are loaded in inline <style> block by style-loader and there’s no problem. However, in prod mode, instead of being added to main.css, the graphiql.css was added to the chunk file which contained CodeMirror and GraphiQL.

It took me a lot of hours trying to upgrade my old react-relay to the newest version (since apparently the graphiql package required graphql@^0.10.5 via codemirror-graphql via graphql-language-service-interface) therefore I can upgrade graphiql to the newest one. However after the upgrading I found the problem existing with the newest version. Then I started to set breakpoints and debug CodeMirror. Then I found without the proper style, .CodeMirror-gutter.CodeMirror-foldgutter became “display: block” instead of “display: inline-block”. The width of that element cascaded to all its parent elements and caused the disaster. Even graphiql.css was loaded immediately after the initialization, the mess didn’t go away.

Once found the problem, I changed my code to ensure that graphiql.css must be loaded before <GraphiQL /> get rendered. The problem was gone.

[philiptzou]

@hotgazpacho I think any value larger than 0 for setInterval() is acceptable as long as the delay isn’t perceptible to the user. How about 100?