<p dir="auto">Now that universal Webpack (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="288925622" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/3578" data-hovercard-type="pull_request" data-hovercard-url="/vercel/next.js/pull/3578/hovercard" href="https://github.com/vercel/next.js/pull/3578">#3578</a>) is released, there's a great opportunity to streamline custom servers using Next. Having the ability to write in a consistent syntax (whether ES6+ or TypeScript) between client and server code would greatly benefit the developer experience. I find it sort of awkward that a custom server entry point <a href="https://github.com/zeit/next.js#custom-server-and-routing">has to remain compatible with whatever your current version of Node is.</a> I created a <a href="https://gitlab.com/smidgen-studio/next-custom-server" rel="nofollow">work-around as a Next plugin</a>, but I find it hacky and awkward. I can't imagine it would be too much work to build a server bundle separately from the client bundle. What can I do to help this along?</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">When I run <code class="notranslate">next dev</code> or <code class="notranslate">next start</code>, my custom server is bundled via Webpack and served, enabling consistent syntax across the client and custom server code.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">A custom server is started using <code class="notranslate">node ./path/to/server.js</code>, so Webpack never touches it.</p>
<h2 dir="auto">Context</h2>


<p dir="auto">I usually write in TypeScript, so bundling Next custom server code through Webpack would enforce consistent syntax in my code base and eliminate my dependency on ESLint or Babel.</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>^5.0.0</td>
</tr>
<tr>
<td>node</td>
<td>8.7.0</td>
</tr>
<tr>
<td>OS</td>
<td>macOS 10.13.3</td>
</tr>
<tr>
<td>browser</td>
<td>Firefox 58.0.2</td>
</tr>
<tr>
<td>etc</td>
<td>N/A</td>
</tr>
</tbody>
</table>
<h1 dir="auto">Examples bug report</h1>
<h2 dir="auto">Example name</h2>
<p dir="auto">with-<a class="issue-link js-issue-link notranslate" rel="noopener noreferrer nofollow" href="https://linear.app/vercel/issue/NEXT-css">next-css</a></p>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">Impossible to go from one page which doesn't contain an imported css file to a one containing an imported css file</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">Steps to reproduce the behavior, please provide code snippets or a repository: <a href="https://github.com/MarchWorks/with-next-css-issue">https://github.com/MarchWorks/with-next-css-issue</a></p>
<ol dir="auto">
<li>Go to 'index page'</li>
<li>Click on 'About'</li>
<li>See error</li>
</ol>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>Version of Next.js: 8.1.0</li>
</ul>