<p dir="auto">The mobx example does not work with jest configured(I use the .babelrc config as in jest example).<br>
I believe there is problem with .babelrc configuration with env</p>
<p dir="auto">So, if .babelrc config is same as jest then, tests run but mobx doesn't and vice-versa.</p>



<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<p dir="auto">mobx store should run</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">mobx store does not work, the observable properties/ action setters and getters does not work.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Use mobx example and change the babelrc config to the one with jest example</li>
</ol>
<h2 dir="auto">Context</h2>


<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>4.2.2</td>
</tr>
<tr>
<td>node</td>
<td>8.4</td>
</tr>
<tr>
<td>OS</td>
<td>macos</td>
</tr>
<tr>
<td>browser</td>
<td></td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">currently <code class="notranslate">material-ui</code> use <code class="notranslate">renderPage</code> to pass <code class="notranslate">pageContext</code> to page Component</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// _documents.js
const page = ctx.renderPage(Page =&gt; props =&gt; (
      &lt;Page pageContext={pageContext} {...props} /&gt;
  ));"><pre class="notranslate"><span class="pl-c">// _documents.js</span>
<span class="pl-k">const</span> <span class="pl-s1">page</span> <span class="pl-c1">=</span> <span class="pl-s1">ctx</span><span class="pl-kos">.</span><span class="pl-en">renderPage</span><span class="pl-kos">(</span><span class="pl-v">Page</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">props</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">Page</span> <span class="pl-c1">pageContext</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">pageContext</span><span class="pl-kos">}</span> <span class="pl-kos">{</span>...<span class="pl-s1">props</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">so, <strong>every page</strong> components need to handle <code class="notranslate">pageContext</code></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// pages/index.js
export default withRoot(Home) // &lt;-- withRoot HOC handle pageContext"><pre class="notranslate"><span class="pl-c">// pages/index.js</span>
<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-en">withRoot</span><span class="pl-kos">(</span><span class="pl-v">Home</span><span class="pl-kos">)</span> <span class="pl-c">// &lt;-- withRoot HOC handle pageContext</span></pre></div>
<h2 dir="auto">Expected Behavior</h2>


<p dir="auto">but i really want '_app.js' handle withRoot or other HOC,<br>
so <strong>every page</strong> components can be more simplier.</p>
<p dir="auto">currently <code class="notranslate">_document.js</code> can use <code class="notranslate">renderPage</code> to  pass props to <code class="notranslate">Page Component</code> such as  'pageContext' above.<br>
its for style ssr.</p>
<p dir="auto">but <code class="notranslate">_document.js</code> can't send props to <code class="notranslate">App Component``_app.js</code>.<br>
u only can modify <code class="notranslate">App</code> props by custom it <code class="notranslate">/page/_app.js</code>, and then generate App props by getInitialProps function.<br>
<a href="https://github.com/zeit/next.js/blob/canary/server/render.js#L79-L88">https://github.com/zeit/next.js/blob/canary/server/render.js#L79-L88</a></p>
<p dir="auto">but, again, <code class="notranslate">_document.js</code> can't send props to <code class="notranslate">_app.js</code> directly if i want to handle something about style ssr in _app.js, so that i don't need write those same code in every pages</p>
<p dir="auto">may be Next.js would modify the renderPage function, may be add <code class="notranslate">appProps</code> below</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const renderPage = (enhancer = Page =&gt; Page, appProps) =&gt; {
    const app = createElement(App, {
      Component: enhancer(Component),
      router,
      ...props,
      ...appProps
    })"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-en">renderPage</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">enhancer</span> <span class="pl-c1">=</span> <span class="pl-v">Page</span> <span class="pl-c1">=&gt;</span> <span class="pl-v">Page</span><span class="pl-kos">,</span> <span class="pl-s1">appProps</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">app</span> <span class="pl-c1">=</span> <span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-v">App</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
      <span class="pl-c1">Component</span>: <span class="pl-s1">enhancer</span><span class="pl-kos">(</span><span class="pl-v">Component</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      router<span class="pl-kos">,</span>
      ...<span class="pl-s1">props</span><span class="pl-kos">,</span>
      ...<span class="pl-s1">appProps</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos"></span></pre></div>