N
Nuxt•2mo ago
bunomel

TypeError: Cannot read properties of undefined (reading 'base error after upgrading 3.13.x to 3.17.x

After upgrading to 3.17 even if there is no prerendering in place. Problem exists on production build. virtual:nuxt:/Users/buny/workspaces/yxxxx/xxx/.nuxt/paths.mjs:4 Uncaught TypeError: Cannot read properties of undefined (reading 'baseURL') at CC (virtual:nuxt:/Users/buny/workspaces/yxxxx/xxxx/.nuxt/paths.mjs:4:30) at virtual:nuxt:/Users/buny/workspaces/yxxxx/xxxx/.nuxt/fetch.mjs:5:14 
 import { joinRelativeURL } from 'ufo'
import { useRuntimeConfig } from '#internal/nitro'
const getAppConfig = () => useRuntimeConfig().app
export const baseURL = () => getAppConfig().baseURL
export const buildAssetsDir = () => getAppConfig().buildAssetsDir
export const buildAssetsURL = (...path) => joinRelativeURL(publicAssetsURL(), buildAssetsDir(), ...path)
export const publicAssetsURL = (...path) => {
  const appConfig = getAppConfig()
  const publicBase = appConfig.cdnURL || appConfig.baseURL
  return path.length ? joinRelativeURL(publicBase, ...path) : publicBase
}
if (import.meta.client) {
  globalThis.__buildAssetsURL = buildAssetsURL
  globalThis.__publicAssetsURL = publicAssetsURL
}
 import { joinRelativeURL } from 'ufo'
import { useRuntimeConfig } from '#internal/nitro'
const getAppConfig = () => useRuntimeConfig().app
export const baseURL = () => getAppConfig().baseURL
export const buildAssetsDir = () => getAppConfig().buildAssetsDir
export const buildAssetsURL = (...path) => joinRelativeURL(publicAssetsURL(), buildAssetsDir(), ...path)
export const publicAssetsURL = (...path) => {
  const appConfig = getAppConfig()
  const publicBase = appConfig.cdnURL || appConfig.baseURL
  return path.length ? joinRelativeURL(publicBase, ...path) : publicBase
}
if (import.meta.client) {
  globalThis.__buildAssetsURL = buildAssetsURL
  globalThis.__publicAssetsURL = publicAssetsURL
}
3 Replies
kapa.ai
kapa.ai•2mo ago
Hi @bunomel. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error you're encountering, TypeError: Cannot read properties of undefined (reading 'baseURL'), after upgrading from Nuxt 3.13.x to 3.17.x, is related to how the app namespace in runtimeConfig is being accessed. In Nuxt, runtimeConfig.app contains internal configuration like baseURL, buildAssetsDir, and cdnURL, and these are expected to always be present in the runtime config object. From the code you posted, the error occurs because useRuntimeConfig().app is returning undefined, so trying to access .baseURL throws the error. Possible Causes and Solutions 1. Corrupted or Missing Runtime Config
If for some reason the app key is missing from your runtime config, this error will occur. According to the Nuxt documentation, the default structure of runtimeConfig should always include an app object with at least baseURL, buildAssetsDir, and cdnURL (even if empty) [runtimeConfig docs]. 2. Environment Variable Overwrites
The app namespace is reserved for Nuxt's internal use. You should not add custom keys to runtimeConfig.app, and you should only override its values using the appropriate environment variables (e.g., NUXT_APP_BASE_URL) [runtimeConfig docs]. 3. Upgrade Issues or Dependency Mismatch
If you have upgraded Nuxt but some dependencies (like @nuxt/kit, @nuxt/schema, or nitropack) are still on older versions, this can cause runtime config issues. The Nuxt team recommends running: 
   npx nuxi@latest upgrade --dedupe
   
   npx nuxi@latest upgrade --dedupe
This command deduplicates your lockfile and ensures all related dependencies are updated, which can resolve issues caused by mismatched versions [Nuxt 3.17.2 release notes]. 4. Do Not Add Custom Keys to app
If you have custom keys in runtimeConfig.app, Nuxt will now warn and remove them, as this namespace is reserved and exposed to the client [PR #31774]. What You Should Do - Check your nuxt.config: Make sure you are not adding custom keys to runtimeConfig.app. Only use public for client-exposed config and the root for server-only config. - Update all dependencies: Run the dedupe command above. - Check for environment variable overrides: Make sure you are not accidentally removing or misconfiguring the app namespace via environment variables or build scripts. - If using a monorepo or custom builder: Ensure all Nuxt-related packages are on compatible versions, as mismatches can cause config issues [related issue]. If after these steps the problem persists, please provide your nuxt.config and any custom runtime config logic for further diagnosis. --- References:
- Nuxt runtimeConfig documentation
- Nuxt 3.17.2 release notes (upgrade advice)
- Reserved app namespace warning ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@238313447169720321> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
bunomel
bunomelOP•2mo ago
export default defineNuxtConfig({
  app: {
    head: {
      title: "",
      charset: "utf-8",
      viewport: "width=device-width, initial-scale=1, maximum-scale=5",
      htmlAttrs: {
        lang: "de",
      },

    },
  },
  nitro: {
    preset: "node-server",
  },
  compatibilityDate: "2024-04-03",
  devtools: { enabled: true },
  css: ["assets/css/main.css"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  modules: [
    "@pinia/nuxt",
    "@nuxt/content",
    "@vee-validate/nuxt",
    "@nuxt/image",
    "@unlok-co/nuxt-stripe",
    "nuxt-swiper",
    "nuxt-svgo",
    "nuxt-gtag",
  ],
  gtag: {
    id: "G-",
  },
  runtimeConfig: {
    woocommerce: {
      apiBase: process.env.WOOCOMMERCE_API_BASE,
      username: process.env.WOOCOMMERCE_CONSUMER_KEY,
      password: process.env.WOOCOMMERCE_CONSUMER_SECRET,
    },
    stripe: {
      key: process.env.STRIPE_SECRET_KEY,
      webhookSecret: process.env.STRIPE_WEBHOOK_SECRET,
      options: {},
    },
    public: {
      apiBase: process.env.WOOCOMMERCE_API_BASE,
      stripe: {
        key: process.env.STRIPE_PUBLIC_KEY,
        options: {},
      },
    },
  },
  content: {
    markdown: {
      anchorLinks: false,
    },
  },
});
export default defineNuxtConfig({
  app: {
    head: {
      title: "",
      charset: "utf-8",
      viewport: "width=device-width, initial-scale=1, maximum-scale=5",
      htmlAttrs: {
        lang: "de",
      },

    },
  },
  nitro: {
    preset: "node-server",
  },
  compatibilityDate: "2024-04-03",
  devtools: { enabled: true },
  css: ["assets/css/main.css"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  modules: [
    "@pinia/nuxt",
    "@nuxt/content",
    "@vee-validate/nuxt",
    "@nuxt/image",
    "@unlok-co/nuxt-stripe",
    "nuxt-swiper",
    "nuxt-svgo",
    "nuxt-gtag",
  ],
  gtag: {
    id: "G-",
  },
  runtimeConfig: {
    woocommerce: {
      apiBase: process.env.WOOCOMMERCE_API_BASE,
      username: process.env.WOOCOMMERCE_CONSUMER_KEY,
      password: process.env.WOOCOMMERCE_CONSUMER_SECRET,
    },
    stripe: {
      key: process.env.STRIPE_SECRET_KEY,
      webhookSecret: process.env.STRIPE_WEBHOOK_SECRET,
      options: {},
    },
    public: {
      apiBase: process.env.WOOCOMMERCE_API_BASE,
      stripe: {
        key: process.env.STRIPE_PUBLIC_KEY,
        options: {},
      },
    },
  },
  content: {
    markdown: {
      anchorLinks: false,
    },
  },
});

Did you find this page helpful?