title: dotenv values not loaded in nextjs
body: <p>I am struggling to load my <code>.env</code> file in my NextJS app.  Here is my code:</p>
  <p>My <code>.env</code> is in root <code>/</code><br />
  My <code>index.js</code> is in <code>/pages/index.js</code></p>
  <p>Here is my <code>index.js</code>:</p>
  <pre class="lang-js prettyprint-override"><code>require(&quot;dotenv&quot;).config({ path: __dirname + '/../.env' })
  
  import React, {Component} from 'react'
  import Layout from '../components/layout'
  import axios from 'axios'
  
  class Import extends Component{
  
      uploadCSV = (evt) =&gt; {
          evt.preventDefault();
  
          const uploadURL = process.env.MY_UPLOAD_URL
  
          let data = new FormData(evt.target)
  
          axios.post(uploadURL, data, {
              headers: {
                  'Content-Type': 'multipart/form-data'
              }
          }).then((res) =&gt; {
              console.log(res)
          })
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;Layout title=&quot;Import Chatbot Intents&quot; description=&quot;Import Chatbot Intents&quot;&gt;
                      &lt;form onSubmit={this.uploadCSV} name=&quot;import_csv&quot; className=&quot;import_csv&quot;&gt;
                          &lt;h2&gt;Import CSV&lt;/h2&gt;
                          &lt;div className=&quot;form-group&quot;&gt;
                              &lt;label htmlFor=&quot;csv_file&quot;&gt;Upload file here: &lt;/label&gt;
                              &lt;input type=&quot;file&quot; name=&quot;csv_file&quot; id=&quot;csv_file&quot; ref=&quot;csv_file&quot; /&gt;
                          &lt;/div&gt;
                          &lt;div className=&quot;form-group&quot;&gt;
                              &lt;input type=&quot;hidden&quot; id=&quot;customer_id&quot; name=&quot;customer_id&quot; ref=&quot;customer_id&quot; value=&quot;1&quot;/&gt;
                              &lt;button className=&quot;btn btn-success&quot;&gt;Submit&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/Layout&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default Import
  </code></pre>
  <p>I observe that I can print out <code>.env</code> content in <code>render()</code> function, but I cannot do that in <code>uploadCSV</code> function.</p>
  <p>For your info:</p>
  <ul>
  <li>using just <code>require(&quot;dotenv&quot;).config()</code> doesn't work</li>
  <li>using <code>require(&quot;dotenv&quot;).config({path: &quot;../&quot;})</code> doesn't work</li>
  </ul>
  <p><strong>Updated</strong></p>
  <p>My <code>env-config.js</code>:</p>
  <pre class="lang-js prettyprint-override"><code>module.exports = {
      'CSV_UPLOAD_URL': &quot;http://localhost:3000/uploadcsv&quot;
  }
  </code></pre>
  <p>My babel.config.js:</p>
  <pre class="lang-js prettyprint-override"><code>const env = require('./env-config')
  console.log(env)
  
  module.exports = function(api){
  
    // console.log({&quot;process&quot;: process.env})
    api.cache(false)
  
    const presets = [
      &quot;next/babel&quot;,
      &quot;@zeit/next-typescript/babel&quot;
    ]
  
    const plugins = [
  
        &quot;@babel/plugin-transform-runtime&quot;,
        [
          'transform-define',
          env
        ]
    ]
  
    return { presets, plugins }
  }
  </code></pre>
  <p>My <code>package.json</code></p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;name&quot;: &quot;Botadmin&quot;,
    &quot;scripts&quot;: {
      &quot;dev&quot;: &quot;next -p 3001&quot;,
      &quot;build&quot;: &quot;next build&quot;,
      &quot;start&quot;: &quot;next start&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@babel/runtime&quot;: &quot;^7.1.5&quot;,
      &quot;@zeit/next-less&quot;: &quot;^1.0.1&quot;,
      &quot;@zeit/next-typescript&quot;: &quot;^1.1.1&quot;,
      &quot;@zeit/next-workers&quot;: &quot;^1.0.0&quot;,
      &quot;axios&quot;: &quot;^0.18.0&quot;,
      &quot;forever&quot;: &quot;^0.15.3&quot;,
      &quot;less&quot;: &quot;^3.8.1&quot;,
      &quot;multer&quot;: &quot;^1.4.1&quot;,
      &quot;next&quot;: &quot;7.0.2&quot;,
      &quot;nprogress&quot;: &quot;^0.2.0&quot;,
      &quot;papaparse&quot;: &quot;^4.6.2&quot;,
      &quot;react&quot;: &quot;16.6.3&quot;,
      &quot;react-dom&quot;: &quot;16.6.3&quot;,
      &quot;typescript&quot;: &quot;^3.1.6&quot;,
      &quot;worker-loader&quot;: &quot;^2.0.0&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/plugin-transform-runtime&quot;: &quot;^7.1.0&quot;,
      &quot;babel-plugin-transform-define&quot;: &quot;^1.3.0&quot;,
      &quot;dotenv&quot;: &quot;^6.1.0&quot;,
      &quot;fork-ts-checker-webpack-plugin&quot;: &quot;^0.4.15&quot;
    }
  }
  </code></pre>
  <p>The Error:</p>
  <blockquote>
  <p>Module build failed (from ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js):</p>
  <p>TypeError: Property property of MemberExpression expected node to be of a type [&quot;Identifier&quot;,&quot;PrivateName&quot;] but instead got &quot;StringLiteral&quot;</p>
  </blockquote>