<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>
<p dir="auto">I wanted to move styled-jsx code to a dedicated variable and then inject it into the <code class="notranslate">render()</code> method like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const divstyle = (
  &lt;style jsx&gt;{`
    div {
      color: red;
    }
  `}
  &lt;/style&gt;
);"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">divstyle</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">jsx</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s">`</span>
<span class="pl-s">    div {</span>
<span class="pl-s">      color: red;</span>
<span class="pl-s">    }</span>
<span class="pl-s">  `</span><span class="pl-kos">}</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">style</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="return (
  &lt;div&gt;
    &lt;div&gt;foo&lt;/div&gt;
    {divstyle}
  &lt;/div&gt;
);"><pre class="notranslate"><span class="pl-k">return</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>foo<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">{</span><span class="pl-s1">divstyle</span><span class="pl-kos">}</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">This will inject the style into the DOM but not scoped. In console I see this error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Warning: Received `true` for a non-boolean attribute `jsx`.
If you want to write it to the DOM, pass a string instead: jsx=&quot;true&quot; or jsx={value.toString()}."><pre class="notranslate"><code class="notranslate">Warning: Received `true` for a non-boolean attribute `jsx`.
If you want to write it to the DOM, pass a string instead: jsx="true" or jsx={value.toString()}.
</code></pre></div>
<p dir="auto">If I move the <code class="notranslate">&lt;style jsx&gt;</code> part from the variable back into the render method, everything works perfectly.</p>
<p dir="auto">What's wrong? Isn't it possible to to use styled-jsx outside of <code class="notranslate">render()</code> ?</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>
<p dir="auto">I'm struggling to make the isomorphic routing work with an express server.<br>
The routing works just fine on the server, but when I try to do client side routing via the Link tag I get the flashing 404 and then the page.</p>
<p dir="auto">I've read all about the 404 flashing issue in other tickets (like this <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="252066238" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/2833" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/2833/hovercard" href="https://github.com/vercel/next.js/issues/2833">#2833</a>), nothing have worked for me.</p>
<p dir="auto">I'm wondering if isomorphic routing is possible with express router or I need to use NextJs default router for that?</p>
<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.1.4</td>
</tr>
<tr>
<td>node</td>
<td>8.6.0</td>
</tr>
<tr>
<td>OS</td>
<td>HighSierra</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 62</td>
</tr>
<tr>
<td>Express</td>
<td>4.15.3</td>
</tr>
</tbody>
</table>
<p dir="auto">Thanks!!!</p>