<h1 dir="auto">Bug report</h1>
<p dir="auto">Hi guys, when I use <code class="notranslate">dev: false</code> inside my app, <strong>material-ui</strong> classes wont load.</p>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">That's the code:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const port = process.env.PORT || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev: false });
const handle = app.getRequestHandler();

app.prepare().then(() =&gt; {
	const server = express();
    
	// Routes and stuff...
})"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">port</span> <span class="pl-c1">=</span> <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">PORT</span> <span class="pl-c1">||</span> <span class="pl-c1">3000</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">dev</span> <span class="pl-c1">=</span> <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">NODE_ENV</span> <span class="pl-c1">!==</span> <span class="pl-s">'production'</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">next</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">dev</span>: <span class="pl-c1">false</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">handle</span> <span class="pl-c1">=</span> <span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">getRequestHandler</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">prepare</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-kos">(</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">server</span> <span class="pl-c1">=</span> <span class="pl-en">express</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    
	<span class="pl-c">// Routes and stuff...</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">The expected result should be:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/16429579/50084583-c4b11400-01f7-11e9-9be4-6a236d3882fd.png"><img src="https://user-images.githubusercontent.com/16429579/50084583-c4b11400-01f7-11e9-9be4-6a236d3882fd.png" alt="cleanshot 2018-12-17 at 12 31 51" style="max-width: 100%;"></a></p>
<p dir="auto">but is:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/16429579/50084533-9c291a00-01f7-11e9-96f0-5396ef45ed56.png"><img src="https://user-images.githubusercontent.com/16429579/50084533-9c291a00-01f7-11e9-96f0-5396ef45ed56.png" alt="cleanshot 2018-12-17 at 12 25 52" style="max-width: 100%;"></a></p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">Steps to reproduce the behavior, please provide code snippets or a repository:</p>
<ol dir="auto">
<li>Install  <strong><a class="user-mention notranslate" data-hovercard-type="organization" data-hovercard-url="/orgs/material-ui/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/material-ui">@material-ui</a></strong></li>
</ol>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="		&quot;@material-ui/core&quot;: &quot;latest&quot;,
		&quot;@material-ui/icons&quot;: &quot;^3.0.1&quot;,
		&quot;@material-ui/styles&quot;: &quot;^3.0.0-alpha.2&quot;,"><pre class="notranslate">		<span class="pl-ent">"@material-ui/core"</span>: <span class="pl-s"><span class="pl-pds">"</span>latest<span class="pl-pds">"</span></span>,
		<span class="pl-ent">"@material-ui/icons"</span>: <span class="pl-s"><span class="pl-pds">"</span>^3.0.1<span class="pl-pds">"</span></span>,
		<span class="pl-ent">"@material-ui/styles"</span>: <span class="pl-s"><span class="pl-pds">"</span>^3.0.0-alpha.2<span class="pl-pds">"</span></span>,</pre></div>
<ol start="2" dir="auto">
<li>Run the server with production build</li>
</ol>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: macOS Mojave <code class="notranslate">v10.14.2</code></li>
<li>Version of Next.js: <code class="notranslate">7.0.2</code></li>
</ul>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">Used the material-ui Next.js starter <code class="notranslate">https://github.com/mui-org/material-ui/tree/master/examples/nextjs</code>, and wrote an app.</p>
<p dir="auto">The app works fine when running with <code class="notranslate">yarn dev</code>, <code class="notranslate">yarn start</code>, and a custom <code class="notranslate">server.js</code> with <code class="notranslate">dev</code> set to <code class="notranslate">true</code>, but when I deploy it using a custom <code class="notranslate">server.js</code>, CSS styles aren't applied when running in production mode (<code class="notranslate">next({dev: false})</code>).</p>
<p dir="auto">The HTML comes just fine, styled, from the server (for less than a second it looks as it should), but as soon as the client side code executes, the styling goes away. There is nothing in the Console.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">Here's my <code class="notranslate">server.js</code>, which I execute with: <code class="notranslate">yarn build ; node server.js</code>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const compression = require('compression');
const next = require('next');

const port = parseInt(process.env.PORT, 10) || 3000;

const dev = false;
const app = next({dev});
const handle = app.getRequestHandler();

app.prepare()
    .then(() =&gt; {
        const server = express();
        server.get('*', (req, res) =&gt; {
            return handle(req, res);
        });
        server.listen(port, (err) =&gt; {
            if (err) throw err;
            console.log(`&gt; Ready on http://localhost:${port} Dev? ${dev}`)
        })
    });"><pre lang="const" class="notranslate"><code class="notranslate">const compression = require('compression');
const next = require('next');

const port = parseInt(process.env.PORT, 10) || 3000;

const dev = false;
const app = next({dev});
const handle = app.getRequestHandler();

app.prepare()
    .then(() =&gt; {
        const server = express();
        server.get('*', (req, res) =&gt; {
            return handle(req, res);
        });
        server.listen(port, (err) =&gt; {
            if (err) throw err;
            console.log(`&gt; Ready on http://localhost:${port} Dev? ${dev}`)
        })
    });
</code></pre></div>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">The page should look the same no matter what the value of <code class="notranslate">dev</code> is.</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: Windows 10, Ubuntu</li>
<li>Browser Chrome, Firefox, Edge</li>
<li>Version of Next.js: <code class="notranslate">7.0.2</code></li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">I searched the existing issues and the closest that matched was <a href="https://github.com/zeit/next.js/issues/4700" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/4700/hovercard">4470</a>, but that recommended using the <code class="notranslate">material-ui</code> code example, which I'm already doing.</p>
<p dir="auto">I have a custom <code class="notranslate">next.config.js</code> for loading environment variables:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const path = require('path');
const dev = process.env.NODE_ENV !== 'production';
module.exports = {
    webpack: (config) =&gt; {
        config.plugins.push(new Dotenv({
            path: path.join(__dirname, dev ? '.env.development' : '.env.production'),
            systemvars: true
        }));
        config.resolve.extensions = ['.js', '.jsx'];
        return config
    }
};"><pre lang="const" class="notranslate"><code class="notranslate">const path = require('path');
const dev = process.env.NODE_ENV !== 'production';
module.exports = {
    webpack: (config) =&gt; {
        config.plugins.push(new Dotenv({
            path: path.join(__dirname, dev ? '.env.development' : '.env.production'),
            systemvars: true
        }));
        config.resolve.extensions = ['.js', '.jsx'];
        return config
    }
};
</code></pre></div>