<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">Expected Behavior</h2>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">next.config.js</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="module.exports = (phase, { defaultConfig }) =&gt; {
  return {
    publicRuntimeConfig: {
      defaultEnvironmentSettings: 'test',
    },
    webpack: (config, { buildId, dev, isServer, defaultLoaders }) =&gt; {
      // XXX https://github.com/evanw/node-source-map-support/issues/155
      config.node = {
        fs: 'empty',
        module: 'empty',
      };
      return config;
    },
  };
};
"><pre class="notranslate"><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-en">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">phase</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> defaultConfig <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">return</span> <span class="pl-kos">{</span>
    <span class="pl-c1">publicRuntimeConfig</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">defaultEnvironmentSettings</span>: <span class="pl-s">'test'</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-en">webpack</span>: <span class="pl-kos">(</span><span class="pl-s1">config</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> buildId<span class="pl-kos">,</span> dev<span class="pl-kos">,</span> isServer<span class="pl-kos">,</span> defaultLoaders <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
      <span class="pl-c">// XXX https://github.com/evanw/node-source-map-support/issues/155</span>
      <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">node</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
        <span class="pl-c1">fs</span>: <span class="pl-s">'empty'</span><span class="pl-kos">,</span>
        <span class="pl-c1">module</span>: <span class="pl-s">'empty'</span><span class="pl-kos">,</span>
      <span class="pl-kos">}</span><span class="pl-kos">;</span>
      <span class="pl-k">return</span> <span class="pl-s1">config</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">page</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const { publicRuntimeConfig } = getConfig();
const { groupSettings, url } = this.props;
const schoolName = url.query.schoolName;
console.log('publicRuntimeConfig', publicRuntimeConfig) // publicRuntimeConfig undefined
console.log('getConfig()', getConfig()) // getConfig()  serverRuntimeConfig:{}, publicRuntimeConfig: undefined
"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-kos">{</span> publicRuntimeConfig <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">getConfig</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-kos">{</span> groupSettings<span class="pl-kos">,</span> url <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">schoolName</span> <span class="pl-c1">=</span> <span class="pl-s1">url</span><span class="pl-kos">.</span><span class="pl-c1">query</span><span class="pl-kos">.</span><span class="pl-c1">schoolName</span><span class="pl-kos">;</span>
<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'publicRuntimeConfig'</span><span class="pl-kos">,</span> <span class="pl-s1">publicRuntimeConfig</span><span class="pl-kos">)</span> <span class="pl-c">// publicRuntimeConfig undefined</span>
<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'getConfig()'</span><span class="pl-kos">,</span> <span class="pl-en">getConfig</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-c">// getConfig()  serverRuntimeConfig:{}, publicRuntimeConfig: undefined</span></pre></div>
<h2 dir="auto">Context</h2>
<p dir="auto"><code class="notranslate">publicRuntimeConfig</code> is undefined</p>
<p dir="auto">This only happens when I use <code class="notranslate">NODE_ENV staging</code>, it works fine in development mode. (I haven't tested against production env)</p>
<p dir="auto">Note that my staging environment is hosted on AWS lambda, but it's maybe not related to the issue.</p>
<p dir="auto">Although I see the use case for this, I personally will never use this feature.</p>
<p dir="auto">I lose too much flexibility &amp; reusability (and/or gain awkwardness) by not using SASS/Stylus/whatever. And with a cached, single (or not) stylesheet, I won't suffer any performance loss by not taking the small, as-needed css module approach.</p>
<blockquote>
<p dir="auto">Plus, imo, the CSS module / Shadow-dom styles approach isn't fully solved yet. As <a href="https://github.com/zeit/next.js/issues/22#issuecomment-256417971" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/22/hovercard">mentioned</a>, when each component prints  its own styles, excessive duplicates add up quickly. Of course, this is not a <code class="notranslate">next.js</code> or <code class="notranslate">glamor</code> issue specifically, but part of the reason why I find it makes more sense to compile styles ahead of time.</p>
</blockquote>
<p dir="auto">So, with as easy as it is to attach static assets in the <code class="notranslate">&lt;Head /&gt;</code>, I think <code class="notranslate">glamor</code> should be opt-in or opt-out.</p>
<p dir="auto">As it is, I have to require &amp; load all of <code class="notranslate">glamor</code> regardless of my choice of architecture. <g-emoji class="g-emoji" alias="crying_cat_face" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f63f.png">😿</g-emoji></p>