Cannot read properties of undefined (reading 'options') when using @nuxt/ui-pro v3.0.0-alpha.10

[AyushChothe]

Environment

• Operating System: Darwin
• Node Version: v23.3.0
• Nuxt Version: 3.15.0
• CLI Version: 3.17.2
• Nitro Version: 2.10.4
• Package Manager: [email protected]
• Builder: -
• User Config: default
• Runtime Modules: @nuxt/[email protected], @nuxt/[email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.0-alpha.10

Reproduction

1. Create a new project with: pnpx nuxi@latest init -t ui3 nuxt-ui3
2. Add the following dependencies in package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "lint": "eslint .",
    "lint:fix": "eslint --fix ."
  },
  "dependencies": {
    "@iconify-json/lucide": "^1.2.16",
    "@nuxt/ui": "3.0.0-alpha.10",
    "@nuxt/ui-pro": "3.0.0-alpha.10",
    "nuxt": "^3.15.0"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxt/eslint": "^0.7.2",
    "eslint": "^9.15.0",
    "typescript": "^5.7.2"
  }
}

3. Add following in nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  extends: ["@nuxt/ui-pro"],
  modules: ["@nuxt/ui", "@nuxt/eslint"],
  css: ["~/assets/css/main.css"],

  future: {
    compatibilityVersion: 4,
  },

  compatibilityDate: "2024-11-27",
});

4. Got the following error

> nuxt-app@ dev /Users/ayush/Projects/NodeProjects/nuxt-ui3
> nuxt dev

Nuxt 3.15.0 with Nitro 2.10.4                                                                                                                                                                 2:17:28 PM

 ERROR  Cannot read properties of undefined (reading 'options')                                                                                                                               2:17:28 PM

    at Object.normalizedModule [as config] (node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@nuxt/kit/dist/index.mjs:2119:12)
    at resolveConfig (node_modules/.pnpm/[email protected][email protected]/node_modules/c12/dist/shared/c12.B4fc1S0C.mjs:348:28)
    at async extendConfig (node_modules/.pnpm/[email protected][email protected]/node_modules/c12/dist/shared/c12.B4fc1S0C.mjs:255:21)
    at async loadConfig (node_modules/.pnpm/[email protected][email protected]/node_modules/c12/dist/shared/c12.B4fc1S0C.mjs:187:5)
    at async loadNuxtConfig (node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@nuxt/kit/dist/index.mjs:2535:18)
    at async Object.run (node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/chunks/dev.mjs:170:25)
    at async runCommand$1 (node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/shared/nuxi.DSPrE7vg.mjs:1767:16)
    at async runCommand$1 (node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/shared/nuxi.DSPrE7vg.mjs:1758:11)
    at async runMain$1 (node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/shared/nuxi.DSPrE7vg.mjs:1896:7) 

 ERROR  Cannot read properties of undefined (reading 'options')                                                                                                                               2:17:28 PM

 ELIFECYCLE  Command failed with exit code 1.

Description

Actual Output: The app doesn't start.

Expected Output: The app should start properly.

Additional context

No response

Logs

[HugoRCD]

@AyushChothe You don't have to extend @nuxt/ui-pro you have to put @nuxt/ui-pro directly in the modules:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    devtools: { enabled: true },
    modules: ["@nuxt/ui-pro", "@nuxt/eslint"],
    css: ["~/assets/css/main.css"],

    future: {
        compatibilityVersion: 4,
    },

    compatibilityDate: "2024-11-27",
});

doc -> https://ui3.nuxt.dev/getting-started/installation/pro/nuxt

[AyushChothe]

@AyushChothe You don't have to extend @nuxt/ui-pro you have to put @nuxt/ui-pro directly in the modules:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    devtools: { enabled: true },
    modules: ["@nuxt/ui-pro", "@nuxt/eslint"],
    css: ["~/assets/css/main.css"],

    future: {
        compatibilityVersion: 4,
    },

    compatibilityDate: "2024-11-27",
});

doc -> https://ui3.nuxt.dev/getting-started/installation/pro/nuxt

Thanks @HugoRCD for helping me out! I actually saw the old installation page; it works now.