<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">I expected process.env.NODE_ENV on the client/browser to correspond to environment variable set when app is run:</p>
<p dir="auto">package.json</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  &quot;scripts&quot;: {
    &quot;dev&quot;: &quot;next&quot;,
    &quot;staging&quot;: &quot;NODE_ENV=staging next&quot;,
    &quot;build&quot;: &quot;next build&quot;,
    &quot;start&quot;: &quot;next start&quot;
  }"><pre class="notranslate">  <span class="pl-ent">"scripts"</span>: {
    <span class="pl-ent">"dev"</span>: <span class="pl-s"><span class="pl-pds">"</span>next<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"staging"</span>: <span class="pl-s"><span class="pl-pds">"</span>NODE_ENV=staging next<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"build"</span>: <span class="pl-s"><span class="pl-pds">"</span>next build<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"start"</span>: <span class="pl-s"><span class="pl-pds">"</span>next start<span class="pl-pds">"</span></span>
  }</pre></div>
<p dir="auto">Expected <code class="notranslate">process.env.NODE_ENV</code> to be <code class="notranslate">'staging'</code> when running <code class="notranslate">npm run staging</code>:</p>
<p dir="auto">components/Page.js</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class Page extends React.Component {
  componentDidMount () {
    console.log('process.env.NODE_ENV', process.env.NODE_ENV) // expected 'staging' to be printed here when running `npm run staging`
    console.log('process.env.BUILD_VERSION', process.env.BUILD_VERSION) // '1.0.0'
  }

  render () {
   ...
  }
}"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-v">Page</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span> <span class="pl-kos">{</span>
  <span class="pl-en">componentDidMount</span> <span class="pl-kos">(</span><span class="pl-kos">)</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">'process.env.NODE_ENV'</span><span class="pl-kos">,</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-kos">)</span> <span class="pl-c">// expected 'staging' to be printed here when running `npm run staging`</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">'process.env.BUILD_VERSION'</span><span class="pl-kos">,</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">BUILD_VERSION</span><span class="pl-kos">)</span> <span class="pl-c">// '1.0.0'</span>
  <span class="pl-kos">}</span>

  <span class="pl-en">render</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>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto"><code class="notranslate">console.log(process.env.NODE_ENV)</code> prints <code class="notranslate"> 'development'</code> on the client/browser with <code class="notranslate">npm run staging</code> regardless of the actual NODE_ENV value.</p>
<p dir="auto">I've attempted to override the default <code class="notranslate">DefinePlugin</code> webpack config here to no avail:</p>
<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 = {
  webpack: (config, { dev }) =&gt; {
    config.plugins.push(
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
        'process.env.BUILD_VERSION': JSON.stringify(pkg.version)
      })
    )
    return config
  }
}"><pre class="notranslate"><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</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> dev <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">plugins</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span>
      <span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">DefinePlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
        <span class="pl-s">'process.env.NODE_ENV'</span>: <span class="pl-c1">JSON</span><span class="pl-kos">.</span><span class="pl-en">stringify</span><span class="pl-kos">(</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-kos">)</span><span class="pl-kos">,</span>
        <span class="pl-s">'process.env.BUILD_VERSION'</span>: <span class="pl-c1">JSON</span><span class="pl-kos">.</span><span class="pl-en">stringify</span><span class="pl-kos">(</span><span class="pl-s1">pkg</span><span class="pl-kos">.</span><span class="pl-c1">version</span><span class="pl-kos">)</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></pre></div>
<p dir="auto">It seems that <code class="notranslate">process.env.NODE_ENV</code>  is set to <code class="notranslate">'development'</code> or <code class="notranslate">'production'</code> based on<code class="notranslate">dev</code> in the default webpack config.</p>
<p dir="auto"><a href="https://github.com/zeit/next.js/blob/e451218900b16e721db10413734ca7a964c53677/server/build/webpack.js#L102-L106">https://github.com/zeit/next.js/blob/e451218900b16e721db10413734ca7a964c53677/server/build/webpack.js#L102-L106</a></p>
<p dir="auto">How can I override this behaviour and have <code class="notranslate">process.env.NODE_ENV</code> on the client reference the actual <code class="notranslate">NODE_ENV</code> value?</p>
<h2 dir="auto">Context</h2>


<p dir="auto">I would like to set app variables based on NODE_ENV on the client</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.4.0-canary.3</td>
</tr>
<tr>
<td>node</td>
<td>6.11.5</td>
</tr>
<tr>
<td>OS</td>
<td>macOS siera 10.12.6</td>
</tr>
<tr>
<td>browser</td>
<td>Google Chrome Version 63.0.3239.132</td>
</tr>
</tbody>
</table>
<p dir="auto">Hi, i have a question about minification.<br>
As i have read now in next we use Terser plugin to do it, but it seems that i am missing something because i try to catch errors with bugsnag and i need source map and minified files to upload to bugsnag. So the question is how to create source maps for serverless files? For static components its ok, its creating both of it map.js and min.js and uploads completely fine, but for serverless files i cant do it. The thing is when i used Uglify with Terser my error was coming from the path:</p>
<p dir="auto"><code class="notranslate">/zeit/8fc9cc9/.next/serverless/pages/webpack:/pages/borked.js</code></p>
<p dir="auto">When i stopped using uglifyJS the error was coming from:</p>
<p dir="auto"><code class="notranslate">pages/borked.js</code></p>
<p dir="auto">And the path to get min and map files from next is:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="publicPath: isServer ? 
                &quot;.next/serverless/&quot;
                : &quot;*/_next/&quot;"><pre class="notranslate"><code class="notranslate">publicPath: isServer ? 
                ".next/serverless/"
                : "*/_next/"
</code></pre></div>
<p dir="auto">For Terser plugin the code is</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="if (config.optimization &amp;&amp; config.optimization.minimizer) {
            for (const plugin of config.optimization.minimizer) {
              if (plugin['constructor']['name'] === 'TerserPlugin') {
                plugin.options.parallel = true;
                plugin.options.sourceMap = true;
                break;
              }
            }
          }"><pre class="notranslate"><code class="notranslate">if (config.optimization &amp;&amp; config.optimization.minimizer) {
            for (const plugin of config.optimization.minimizer) {
              if (plugin['constructor']['name'] === 'TerserPlugin') {
                plugin.options.parallel = true;
                plugin.options.sourceMap = true;
                break;
              }
            }
          }
</code></pre></div>
<p dir="auto">Thanks for your help, I appreciate it.</p>