Next.js: Changes not reflecting in env-config.js (universal-configuration)

[nahue]

After making necessary changes to my app (following the universal-configuration example) i have this env-config.js

const prod = process.env.NODE_ENV === 'production';
let backendURL;

if ('ENVIRONMENT' in process.env) {
  if (process.env['ENVIRONMENT'] === 'staging') {
    backendURL = 'http://stagingurl.example.com';
  } else {
    backendURL = 'http://localhost:5000';
  }
} else {
  backendURL = prod ? 'http://prod.example.com' : 'http://localhost:5000';  
};

module.exports = {
  'process.env.BACKEND_URL': backendURL
}

So if i run yarn run build i should get prod.example.com.
But if i run ENVIRONMENT=staging yarn run build should be stagingurl.example.com but hey NO! still prod.example.com, so frustating that i had to hardcode values to get it running in production till i figure this one out 😞 .

I've noticed that the only way this could change is by running yarn clean before each command. Seems like this is being cached and fails to update. Any thoughts?

[timneutkens]

Hmmmmm this is most likely due to babel-loader's caching behaviour. https://github.com/babel/babel-loader#options

It saves the files to node_modules/.cache. I'm thinking we should clear it whenever someone starts using next, so leave the caching on here, just delete the folder when running the command. So that hot reloading will still use it. Same goes for next build

cc @arunoda

[nahue]

Oh ok so ill make a npm task to remove that cache before building.. that should do it at least for now.
Tried removing cacheDirectory from mainBabelOptions and worked fine.. but i guess we dont want to loose babel caching feature 😄

[timneutkens]

@nahue you can actually do this by using next.config.js:

module.exports = {
  webpack: (config, { dev }) => {
    // Perform customizations to config
    config.module.rules = config.module.rules.map(rule => {
      if(rule.loader === 'babel-loader') {
        rule.options.cacheDirectory = false
      }
      return rule
    })
    // Important: return the modified config
    return config
  }
}

[iFwu]

I have the same problem with babel-plugin-inline-react-svg, which changes don't reflect in svg files.
Instead of disabling cacheDirectory option of babel-loader, I use rimraf package to remove any caches of babel-loader:

"scripts": {
    "build": "rimraf node_modules/.cache/babel-loader && next build"
  }

[sedubois]

About env vars, also see https://github.com/zeit/next.js/issues/1488#issuecomment-289108931, allows to set up env vars at runtime