Nuxt•2mo ago

Nuxt UI Pro - Docs template

When running the direct CLI on the repo page: npx nuxi init -t github:nuxt-ui-pro/docs#v3 I get this output:

ERROR  Pre-transform error: [@vue/compiler-sfc] Failed to resolve extends base type.  14:31:24  
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough 
attrs at runtime.

C:/Users/justserdar/Documents/GitHub/nuxt-creem-docs/node_modules/@nuxt/ui/dist/runtime/components/Button.vue
62 |  const { orientation, size: buttonSize } = useButtonGroup<ButtonProps>(props)
63 |
64 |  const loadingAutoState = ref(false)
   |                                      ^
65 |  const formLoading = inject<Ref<boolean> | undefined>(formLoadingInjectionKey, undefined)   
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
66 |
  Plugin: vite:vue
  File: C:/Users/justserdar/Documents/GitHub/nuxt-creem-docs/node_modules/@nuxt/ui/dist/runtime/components/Button.vue (x7)


[14:31:26]  ERROR  Pre-transform error: Failed to resolve import "@nuxt/ui/runtime/components/Toaster.d.vue.js" from "../node_modules/@nuxt/ui/dist/runtime/components/App.vue". Does the file exist?
  Plugin: vite:import-analysis
  File: C:/Users/justserdar/Documents/GitHub/nuxt-creem-docs/node_modules/@nuxt/ui/dist/runtime/components/App.vue:28:21
  16 |  import { ConfigProvider, TooltipProvider, useForwardProps } from "reka-ui";
  17 |  import { reactivePick } from "@vueuse/core";
  18 |  import UToaster from "@nuxt/ui/runtime/components/Toaster.d.vue.js";
     |                        ^
  19 |  import UModalProvider from "@nuxt/ui/runtime/components/ModalProvider.d.vue.js";
  20 |  import USlideoverProvider from "@nuxt/ui/runtime/components/SlideoverProvider.d.vue.js";

ERROR  Pre-transform error: [@vue/compiler-sfc] Failed to resolve extends base type.  14:31:24  
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough 
attrs at runtime.

C:/Users/justserdar/Documents/GitHub/nuxt-creem-docs/node_modules/@nuxt/ui/dist/runtime/components/Button.vue
62 |  const { orientation, size: buttonSize } = useButtonGroup<ButtonProps>(props)
63 |
64 |  const loadingAutoState = ref(false)
   |                                      ^
65 |  const formLoading = inject<Ref<boolean> | undefined>(formLoadingInjectionKey, undefined)   
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
66 |
  Plugin: vite:vue
  File: C:/Users/justserdar/Documents/GitHub/nuxt-creem-docs/node_modules/@nuxt/ui/dist/runtime/components/Button.vue (x7)


[14:31:26]  ERROR  Pre-transform error: Failed to resolve import "@nuxt/ui/runtime/components/Toaster.d.vue.js" from "../node_modules/@nuxt/ui/dist/runtime/components/App.vue". Does the file exist?
  Plugin: vite:import-analysis
  File: C:/Users/justserdar/Documents/GitHub/nuxt-creem-docs/node_modules/@nuxt/ui/dist/runtime/components/App.vue:28:21
  16 |  import { ConfigProvider, TooltipProvider, useForwardProps } from "reka-ui";
  17 |  import { reactivePick } from "@vueuse/core";
  18 |  import UToaster from "@nuxt/ui/runtime/components/Toaster.d.vue.js";
     |                        ^
  19 |  import UModalProvider from "@nuxt/ui/runtime/components/ModalProvider.d.vue.js";
  20 |  import USlideoverProvider from "@nuxt/ui/runtime/components/SlideoverProvider.d.vue.js";

DOM doesn't load sadly, but this builds fine on server.

14 Replies

kapa.ai•2mo ago

Hi @Hum+. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're encountering seems to be related to a compatibility problem between the versions of Nuxt UI and Nuxt UI Pro being used in the template. This error suggests that there might be a mismatch in the dependencies or that the template hasn't been fully updated to work with the latest versions of these packages. Based on the knowledge sources provided, here are a few points to consider: 1. The template you're trying to use is from the v3 branch of the Nuxt UI Pro Docs template. This version is likely using Nuxt UI v3, which is currently in alpha stage. 2. According to the Nuxt UI Pro Installation guide, you should be using the @next version of Nuxt UI Pro:

pnpm add @nuxt/ui-pro@next

pnpm add @nuxt/ui-pro@next

3. The error message suggests that there might be issues with type definitions, which could be related to the alpha status of the packages. To resolve this issue, you could try the following steps: 1. Instead of using the direct CLI command, clone the repository manually and then install the dependencies:

git clone -b v3 <https://github.com/nuxt-ui-pro/docs.git> nuxt-creem-docs
cd nuxt-creem-docs
pnpm install

git clone -b v3 <https://github.com/nuxt-ui-pro/docs.git> nuxt-creem-docs
cd nuxt-creem-docs
pnpm install

2. Make sure you're using the latest versions of both Nuxt UI and Nuxt UI Pro. You can update your package.json to use the @next versions:

{
  "dependencies": {
    "@nuxt/ui": "^2.14.1",
    "@nuxt/ui-pro": "^0.7.5"
  }
}

{
  "dependencies": {
    "@nuxt/ui": "^2.14.1",
    "@nuxt/ui-pro": "^0.7.5"
  }
}

Then run pnpm install again. 3. If the issue persists, you might want to check the Nuxt UI Pro GitHub repository for any open issues related to this problem or consider reporting a new issue. Remember that since you're using alpha versions of these packages, you might encounter bugs or compatibility issues. If possible, you might want to consider using the stable version of the Docs template until the v3 version becomes more stable. If none of these steps resolve your issue, you may need to wait for further updates to the template or the underlying packages. The Nuxt team is actively working on these new versions, so improvements and fixes are likely to come soon. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@544244461228654592> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Hum+OP•2mo ago

@kapa.ai "@nuxt/ui-pro": "3.0.0-alpha.12" is what is being used in the repo

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for providing that information. It appears you're referring to the version of Nuxt UI Pro being used in the repository. Let's clarify this based on the knowledge sources provided. The version you mentioned, "3.0.0-alpha.12", is indeed an alpha version of Nuxt UI Pro. This aligns with the information from the Nuxt UI Pro Installation guide, which suggests using the @next version for Nuxt UI Pro. However, it's important to note that alpha versions can be unstable and may contain bugs or incompatibilities. The issues you encountered in your previous question could be related to this alpha status. To ensure you're using the most up-to-date version, you could try updating to the latest alpha version. You can do this by modifying your package.json:

{
  "dependencies": {
    "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@latest"
  }
}

{
  "dependencies": {
    "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@latest"
  }
}

This approach is mentioned in the Nuxt UI Pro Edge documentation, which states: "To use the latest updates pushed on the dev branch, you can use @nuxt/ui-pro-edge." After making this change, run pnpm install (or your preferred package manager's install command) to update to the latest edge version. If you continue to experience issues, it might be worth checking the Nuxt UI Pro GitHub repository for any known issues or considering reporting a new issue there. The Nuxt team is actively working on these new versions, so they would be interested in any problems you encounter with the alpha releases. Remember, when working with alpha versions, you may encounter instability. If you need a more stable environment, consider using the latest stable version of Nuxt UI Pro until the v3 version becomes more stable. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@544244461228654592> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Hum+OP•2mo ago

@kapa.ai How do I work around this because this is the repo's public CLI command, this should work, I encounter this problem too now on multiple v3 docs

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand your frustration with encountering this issue when using the public CLI command for the v3 docs template. Based on the information provided in the knowledge sources, I can suggest a few workarounds: 1. Manual Clone and Install: Instead of using the CLI command, you can try manually cloning the repository and installing dependencies:

   git clone -b v3 <https://github.com/nuxt-ui-pro/docs.git> your-project-name
   cd your-project-name
   pnpm install

   git clone -b v3 <https://github.com/nuxt-ui-pro/docs.git> your-project-name
   cd your-project-name
   pnpm install

This method might bypass some of the issues you're encountering with the CLI command. 2. Use the Edge Version: As mentioned in the Nuxt UI Pro Installation guide, you can try using the edge version of Nuxt UI Pro. After cloning the repository, update your package.json:

   {
     "devDependencies": {
       "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@latest"
     }
   }

   {
     "devDependencies": {
       "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@latest"
     }
   }

Then run pnpm install to update to the latest edge version. 3. Check for Updates: The Nuxt team frequently updates their repositories. Before trying to use the template, check the Nuxt UI Pro GitHub repository for any recent updates or known issues with the v3 branch. 4. Report the Issue: If you're consistently encountering this problem across multiple attempts with v3 docs, it would be valuable to report this issue on the Nuxt GitHub repository. Follow the guidelines in the Reporting Bugs documentation to create a detailed bug report. 5. Temporary Downgrade: As a last resort, if you need a working solution immediately, consider temporarily using the stable version of the docs template until the v3 version becomes more stable. Remember, v3 is still in development, and alpha versions can be unstable. The Nuxt team is actively working on improvements, so these issues are likely to be resolved in future updates. If none of these workarounds solve your problem, I recommend reaching out to the Nuxt community through their Discord channel or GitHub Discussions for more specific assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@544244461228654592> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Hum+OP•2mo ago

@kapa.ai Returning to "@nuxt/ui-pro": "3.0.0-alpha.11", restored the DOM locally, but .12 does build succesfully...

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for providing that update. It seems you've found a workaround by downgrading to a specific alpha version of Nuxt UI Pro. This situation highlights the challenges that can occur when working with alpha releases. Let's analyze this based on the information we have: 1. Version 3.0.0-alpha.11 works locally for you, restoring the DOM functionality. 2. Version 3.0.0-alpha.12 builds successfully but has DOM issues. This behavior is not uncommon with alpha releases, as they can introduce breaking changes or regressions between versions. Here are some points to consider: 1. Temporary Solution: Using version 3.0.0-alpha.11 can serve as a temporary solution if it meets your current needs. You can specify this version in your package.json:

   {
     "dependencies": {
       "@nuxt/ui-pro": "3.0.0-alpha.11"
     }
   }

   {
     "dependencies": {
       "@nuxt/ui-pro": "3.0.0-alpha.11"
     }
   }

2. Reporting the Issue: It would be valuable to report this regression to the Nuxt team. You can do this by creating an issue in the Nuxt UI Pro GitHub repository. Describe the behavior difference between alpha.11 and alpha.12, including any error messages or unexpected behavior you observed. 3. Staying Updated: Keep an eye on the Nuxt UI Pro repository for updates. The team might release a fix in a future alpha version that addresses this issue. 4. Testing Future Releases: When new alpha versions are released, you can test them in a separate branch of your project to see if they resolve the DOM issues while maintaining build success. 5. Consider Using the Edge Version: As mentioned in the Nuxt UI Pro Installation guide, you could try using the edge version, which might include fixes not yet released in the alpha versions:

   {
     "devDependencies": {
       "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@latest"
     }
   }

   {
     "devDependencies": {
       "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@latest"
     }
   }

Remember, while working with alpha versions, it's important to balance between having the latest features and maintaining a stable development environment. Your feedback on these issues is crucial for the Nuxt team to improve the library before its stable release. If you need further assistance or encounter more issues, don't hesitate to reach out to the Nuxt community through their official channels or consider reporting your findings on their GitHub repository. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@544244461228654592> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Hum+OP•2mo ago

@kapa.ai I'll just work in 11 for now and switch to 12 when I need to deploy. So I can atleast see something in the DOM locally.

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- That's a pragmatic approach to dealing with the current situation. Working with alpha versions can indeed be challenging, and your solution allows you to continue development while managing the issues you've encountered. Here are a few points to keep in mind as you proceed: 1. Local Development: Using version 3.0.0-alpha.11 for local development is a good temporary solution since it allows you to see the DOM and work on your project effectively. 2. Version Control: Make sure to document this version difference in your project, perhaps in a README file or in your development notes. This will help you and other team members remember why you're using different versions for development and deployment. 3. Testing: Before deploying, ensure you thoroughly test your application with version 3.0.0-alpha.12 to catch any potential issues that might arise from the version change. 4. Deployment Scripts: Consider setting up your deployment scripts to automatically switch to version 3.0.0-alpha.12 when building for production. This can help prevent accidentally deploying with the wrong version. 5. Stay Updated: Keep an eye on the Nuxt UI Pro GitHub repository for updates. The issues you're experiencing might be resolved in a future alpha release. 6. Feedback: If you haven't already, consider reporting your experience with these alpha versions to the Nuxt team. Your feedback can be valuable for improving future releases. This approach should allow you to continue your development work while managing the challenges of working with alpha releases. Remember to stay flexible and be prepared to adjust your strategy as new versions are released or if you encounter any new issues. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@544244461228654592> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Nuxt UI Pro - Docs template

Did you find this page helpful?