Setting a baseUrl makes the page fails

Good morning everyone, As mentioned in the title. when I use the full url normally in every request it works fine but once I set baseUrl in the nuxt.config.js file the pages fails to load and outputs this error in the console

<--- Last few GCs --->

[2432:00000205A3C432B0]   279993 ms: Mark-sweep 1979.7 (2053.5) -> 1979.5 (2053.5) MB, 1334.7 / 0.2 ms  (average mu = 0.213, current mu = 0.178) deserialize GC in old space requested
[2432:00000205A3C432B0]   281691 ms: Mark-sweep 1979.6 (2053.5) -> 1979.5 (2053.5) MB, 1390.3 / 0.2 ms  (average mu = 0.198, current mu = 0.181) deserialize GC in old space requested


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 00007FF6DC17FC6C]
Security context: 0x0208981808d1 <JSObject>
    1: createContext(aka createContext) [000003BA40203519] [vm.js:~230] [pc=00000285B0E1C570](this=0x02a23c3804b1 <undefined>,0x029372567981 <Object map = 000000100FAD04C9>,0x018b86feb401 <Object map = 00000163CE140439>)
    2: render [000003E2EC452381] [C:\wamp64\www\ecommerce-frontend\node_modules\@nuxt\vue-renderer\dist\vue-renderer.js:~3811] [pc=000002...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF6DB5E538F napi_wrap+114751
 2: 00007FF6DB58FE26 v8::base::CPU::has_sse+66646
 3: 00007FF6DB590C26 v8::base::CPU::has_sse+70230
 4: 00007FF6DBDA5B3E v8::Isolate::ReportExternalAllocationLimitReached+94
 5: 00007FF6DBD8DC11 v8::SharedArrayBuffer::Externalize+833
 6: 00007FF6DBC59E7C v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1436
 7: 00007FF6DBC650B0 v8::internal::Heap::ProtectUnprotectedMemoryChunks+1312
 8: 00007FF6DBC61BD4 v8::internal::Heap::PageFlagsAreConsistent+3204
 9: 00007FF6DBC573D3 v8::internal::Heap::CollectGarbage+1283
10: 00007FF6DBC66739 v8::internal::Heap::RemoveNearHeapLimitCallback+2521
11: 00007FF6DB979E7F v8::internal::DeserializerAllocator::DecodeReservation+623
12: 00007FF6DB975213 v8::internal::PartialDeserializer::Deserialize+51
13: 00007FF6DB9753E7 v8::internal::PartialDeserializer::DeserializeContext+135
14: 00007FF6DB96EAF6 v8::internal::CreateSnapshotDataBlobInternal+1958
15: 00007FF6DBBD16D5 v8::internal::IsolateAllocator::InitReservation+2037
16: 00007FF6DBBD4565 v8::internal::IsolateAllocator::InitReservation+13957
17: 00007FF6DBD7E610 v8::internal::AsmJsScanner::Seek+53264
18: 00007FF6DBDA1704 v8::debug::WeakMap::New+596
19: 00007FF6DBD9D234 v8::Context::New+68
20: 00007FF6DB599817 v8::base::CPU::has_sse+106055
21: 00007FF6DB59AC5B v8::base::CPU::has_sse+111243
22: 00007FF6DC17FC6C v8::internal::SetupIsolateDelegate::SetupHeap+45852
23: 00000285B0E1C570
npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! ecommerce-frontend@1.0.0 dev: `nuxt`
npm ERR! Exit status 134
npm ERR!
npm ERR! Failed at the ecommerce-frontend@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Mahmoud\AppData\Roaming\npm-cache\_logs\2020-12-29T09_49_40_196Z-debug.log

this is my nuxt.config.js file

export default {
  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    title: 'souk-okaz',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: [
    '~assets/styles/app.scss'
  ],

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
  ],

  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
  ],

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    '@nuxtjs/axios'
  ],

  axios: {
    baseUrl: 'http://soukokaz.test/api/'
  },

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {
  }
}

and this is the action where i triggered axios request

export const actions = {
  async nuxtServerInit({ commit }) {
    let response = await this.$axios.$get('categories');
    commit('SET_CATEGORIES', response.data);
  }
}

this makes the webpage fails ‘Hmmm… can’t reach this page’… but if i removed the baseUrl from the nuxt.config.js and added the full url in the request it works fine

any idea for the solution?

[ricardogobbosouza]

Many users confuse baseUrl with baseURL

[ricardogobbosouza]

Perhaps we can add an option to improve the DX. Like https://github.com/nuxt/http/blob/master/lib/module.js#L36

WDYT @pi0 ?