Cannot start Nuxt: Cannot read properties of undefined (reading 'srcDir')

Question

Description: I'm encountering an error while trying to start my Nuxt.js application. The error message I'm seeing is as follows:

Cannot start nuxt: Cannot read properties of undefined (reading 'srcDir')
at module.exports (node_modules\@nuxtjs\dotenv\lib\module.js:9:24)
at installModule (/D:/muse/node_modules/@nuxt/kit/dist/index.mjs:2409:101)
at async initNuxt (/D:/muse/node_modules/nuxt/dist/index.mjs:3237:7)
at async load (/D:/muse/node_modules/nuxi/dist/chunks/dev.mjs:205:9)
at async Object.invoke (/D:/muse/node_modules/nuxi/dist/chunks/dev.mjs:249:5)
at async _main (/D:/muse/node_modules/nuxi/dist/cli.mjs:49:20)

this is my package.json file

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxtjs/tailwindcss": "^6.8.0",
    "@types/node": "^18.16.19",
    "autoprefixer": "^10.4.14",
    "nuxt": "^3.6.3",
    "nuxt-icon": "^0.4.2",
    "postcss": "^8.4.26",
    "tailwind-scrollbar": "^3.0.4",
    "tailwindcss": "^3.3.3"
  },
  "dependencies": {
    "@headlessui/vue": "^1.7.14",
    "@nuxtjs/dotenv": "^1.4.1",
    "@tailwindcss/forms": "^0.5.4",
    "axios": "^1.4.0",
    "bootstrap": "^5.3.0",
    "tailwind-scrollbar-hide": "^1.1.7"
  }
}

I have tried to investigate the issue and it seems to be related to the @nuxtjs/dotenv module. The error seems to be occurring in the module's code at line 9, where it tries to access a property named 'srcDir' from an object, but it's undefined.

I have already checked my nuxt.config.js file, and the configuration seems to be correct. The @nuxtjs/dotenv module is properly installed in my project, and I have a valid .env file with the required environment variables.

Could anyone help me understand why this error is happening and how to resolve it? Any insights or suggestions would be greatly appreciated. I'm ready to also provide as much details as needed. Thank you.

Here is my nuxtconfig.js file

    // https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ["@nuxtjs/tailwindcss", "nuxt-icon", "@nuxtjs/dotenv"],
  css: ["@/assets/css/main.css"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  app: {
    head: {
      title: "Muse",
      meta: [
        {
          name: "description",
          content: "",
        },
      ],
      link: [{}],
    },
  },
});

Answer 1

1. Uninstall @nuxtjs/dotenv for environment variables.
2. Use only .env file for environment variables.
3. Use variables from .env like process.env.variableName in nuxt.config.js file.