module do not use RuntimeConfig's browserBaseURL to set defaults.baseURL on client side

[alex-maxime]

Hello everyone,

I am facing a strange behavior of the module. I am trying to use nuxt'sRuntimeConfig because i have project which needs to be deployed to multiple environments after build.

Here the sandbox link to test:
https://codesandbox.io/s/modern-wildflower-zxd3j
(watch the log's on terminal, and console - refresh the internal preview)

i made a function to get configuration according the process.env.NODE_ENV

import prod from './prod';
import demo from './demo';
import qa from './qa';
import dev from './dev';

/**
 * Config for an environment
 * @return {{ API_URL: string, HOSTNAME: string, env: string}}
 */
export default () => {
  let environment = dev.config();
  if (process.env.NODE_ENV === 'demo') {
    environment = demo.config();
  } else if (process.env.NODE_ENV === 'qa') {
    environment = qa.config();
  } else if (process.env.NODE_ENV === 'production') {
    environment = prod.config();
  }
  return environment;
};

to test if it will work, i start my project via command in package.json like this:

{
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt build; NODE_ENV=demo nuxt start",
    "generate": "nuxt generate"
  },
}

The process.env.NODE_ENV is set to production on build process, however is overwritten to demo in my function after executing nuxt start

I have configure to module use my function on start

{
  publicRuntimeConfig: {
    // Not used by axios on client side
    browserBaseURL: environment().API_URL, // use demo config on nuxt start with NODE_ENV=demo
    environment: environment().env // is demo on nuxt start with NODE_ENV=demo
  },
  privateRuntimeConfig: {
    // used by axios on server side
    axios: {
      baseURL: environment().API_URL, // use demo config on nuxt start with NODE_ENV=demo
      environment: environment().env // is demo on nuxt start with NODE_ENV=demo
    }
  },
  axios: {
    // baseURL: environment().API_URL // with or without. it is ignored on client side
  },
}

It seems that the browserBaseURL configuration is ignored on client side after running with NODE_ENV=demo nuxt start.

Temporary fix is to use a plugin and use
$axios.setBaseURLfor the client side because on server side, baseURL is set correctly

[alex-maxime]

this pull request seems to be linked with the issue : #516

[alex-maxime]

now nuxt 3 is out and other versions of axios also.