<p dir="auto">I followed the <a href="https://github.com/zeit/next.js/tree/master/examples/with-dotenv">with-dotenv</a> example to structure my environment variables. When I do development (aka <code class="notranslate">npm run dev</code>), everything works as expected. The app is pulling the environmental variable from the <code class="notranslate">.env</code> file.</p>
<p dir="auto">But when I write a docker file, build the image, upload it to Docker Hub, and then host my cluster on Docker Cloud, for some reason the environment variable isn't being included in the app.js that is served to the browser.</p>
<p dir="auto">For reference, here is my Dockerfile:</p>
<div class="highlight highlight-source-dockerfile notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="FROM node:alpine

# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# Install app dependencies
COPY package.json /usr/src/app/
RUN npm install

# Bundle app source
COPY . /usr/src/app

RUN npm run build
EXPOSE 3014

CMD [ &quot;npm&quot;, &quot;start&quot; ]"><pre class="notranslate"><span class="pl-k">FROM</span> node:alpine

<span class="pl-c"><span class="pl-c">#</span> Create app directory</span>
<span class="pl-k">RUN</span> mkdir -p /usr/src/app
<span class="pl-k">WORKDIR</span> /usr/src/app

<span class="pl-c"><span class="pl-c">#</span> Install app dependencies</span>
<span class="pl-k">COPY</span> package.json /usr/src/app/
<span class="pl-k">RUN</span> npm install

<span class="pl-c"><span class="pl-c">#</span> Bundle app source</span>
<span class="pl-k">COPY</span> . /usr/src/app

<span class="pl-k">RUN</span> npm run build
<span class="pl-k">EXPOSE</span> 3014

<span class="pl-k">CMD</span> [ <span class="pl-s">"npm"</span>, <span class="pl-s">"start"</span> ]</pre></div>
<p dir="auto">The <code class="notranslate">build</code> and <code class="notranslate">start</code> scripts correspond to <code class="notranslate">next build</code> and <code class="notranslate">next start</code> respectively.</p>
<p dir="auto">From my understanding, the environment variables should be included at runtime (from <code class="notranslate">next start</code>). So I even logged in to the specific container and wrote <code class="notranslate">echo $MY_ENV_VAR</code> and confirmed that it was the same variable that I set on the Docker Cloud GUI. The problem is, it is undefined when served to the client.</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">The app served by <code class="notranslate">next start</code> to the client should include the environment variables that I set on Docker Cloud for that particular container.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The value of that variable in the browser seems to be <code class="notranslate">undefined</code>. Everything works in development, and I have also proved that the environment variable exists inside the container by typing <code class="notranslate">echo $MY_ENV_VAR</code> inside the specific container.</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>3.2.2</td>
</tr>
<tr>
<td>node</td>
<td>8.4.0</td>
</tr>
</tbody>
</table>
<p dir="auto">Hey guys, I'm trying to build a portion of my app in Next.js (only the portion that needs to be SSR).</p>
<p dir="auto">I've used CRA to build most of my project and now I'm trying to migrate just one page to Next. I'm importing my redux files from a directory that's outside of the next.js dir, so for example I have</p>
<p dir="auto"><code class="notranslate">root/server/pages</code> is where my next.js page lives, and I'm importing from <code class="notranslate">root/src/redux</code>.</p>
<p dir="auto">This is causing this issue here:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&gt; Failed to build
{ Error: (client) ../src/redux/auth.js
Module parse failed: Unexpected token (100:10)
You may need an appropriate loader to handle this file type.
|         return dispatch({
|           type: AuthConstants.UPDATE_USER,
|           ...params,
|         })
|       })"><pre class="notranslate"><code class="notranslate">&gt; Failed to build
{ Error: (client) ../src/redux/auth.js
Module parse failed: Unexpected token (100:10)
You may need an appropriate loader to handle this file type.
|         return dispatch({
|           type: AuthConstants.UPDATE_USER,
|           ...params,
|         })
|       })
</code></pre></div>
<p dir="auto">It looks like Webpack doesn't like the spread operator, but I have all of the necessary plugins for the spread operator to build in my .babelrc:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: [&quot;es2015&quot;, &quot;react&quot;, &quot;stage-0&quot;],
  &quot;plugins&quot;: [
    &quot;transform-decorators-legacy&quot;,
    &quot;transform-object-rest-spread&quot;,
    &quot;transform-es2015-destructuring&quot;,
  ],
  &quot;env&quot;: {
    &quot;debug&quot;: true
  }
}
"><pre class="notranslate"><code class="notranslate">{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": [
    "transform-decorators-legacy",
    "transform-object-rest-spread",
    "transform-es2015-destructuring",
  ],
  "env": {
    "debug": true
  }
}

</code></pre></div>
<p dir="auto">Any clue what's up?</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">Build runs correctly</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Build doesn't run</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>v8.1.2</td>
</tr>
<tr>
<td>OS</td>
<td>MacOS</td>
</tr>
</tbody>
</table>