Nuxt•4d ago

Nuxt Icon build error with UI Pro

[14:43:15] ERROR (node:1420) [DEP0155] DeprecationWarning: Use of deprecated trailing slash pattern mapping "./" in the "exports" field module resolution of the package at C:\Users\justserdar\Documents\GitHub\jsd-nuxt\node_modules.pnpm@[email protected]_magicast@_ffbd6dd89738115a24f52501d58120bb\node_modules@iconify\utils\package.json imported from C:\Users\justserdar\Documents\GitHub\jsd-nuxt\node_modules.pnpm@[email protected]_magicast@_ffbd6dd89738115a24f52501d58120bb\node_modules@nuxt\icon\dist\runtime\server\api.js. Mapping specifiers ending in "/" is no longer supported. [14:43:15] ERROR (node:1420) [DEP0155] DeprecationWarning: Use of deprecated trailing slash pattern mapping "./" in the "exports" field module resolution of the package at C:\Users\justserdar\Documents\GitHub\jsd-nuxt\node_modules@iconify\utils\package.json imported from C:\Users\justserdar\Documents\GitHub\jsd-nuxt\node_modules. Mapping specifiers ending in "/" is no longer supported. [14:44:01] ERROR (node:1420) [DEP0155] DeprecationWarning: Use of deprecated trailing slash pattern mapping "./" in the "exports" field module resolution of the package at C:\Users\justserdar\Documents\GitHub\jsd-nuxt\nodemodules.pnpm\[email protected]@unhead_128cfa468772d71501271ad2157b1cec\node_modules@unocss\preset-wind3\package.json imported from C:\Users\justserdar\Documents\GitHub\jsd-nuxt\nodemodules.pnpm\[email protected]@unhead_128cfa468772d71501271ad2157b1cec\node_modules\nuxt-og-image\dist\runtime\server\og-image\context.js. Mapping specifiers ending in "/" is no longer supported. [14:44:01] ERROR (node:1420) [DEP0155] DeprecationWarning: Use of deprecated trailing slash pattern mapping "./" in the "exports" field module resolution of the package at C:\Users\justserdar\Documents\GitHub\jsd-nuxt\node_modules@unocss\preset-wind3\package.json imported from C:\Users\justserdar\Documents\GitHub\jsd-nuxt\node_modules. Mapping specifiers ending in "/" is no longer supported. I get this error when building Nuxt UI Pro - Saas template, whats goin on and how do i solve it so I can build

35 Replies

kapa.ai•4d ago

Hi @h+. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the error messages you're seeing, you're encountering deprecation warnings related to trailing slash pattern mapping in the "exports" field of package.json files when building a Nuxt UI Pro SaaS template. These are specifically related to the @nuxt/icon module and some dependencies. Understanding the Error These are deprecation warnings (DEP0155) about trailing slash patterns in Node.js package exports. The warnings indicate that some packages in your dependency tree are using a deprecated pattern in their package.json "exports" field, where paths end with a trailing slash (./). This is similar to an issue discussed in a GitHub thread where trailing slashes were causing problems, though in a different context. Is This a Critical Error? Based on a similar situation described in a YouTube video about Nuxt 3 dependency warnings, these are likely just warnings rather than errors that would prevent your build from completing. The video explains that such deprecation warnings often appear in fresh Nuxt applications but don't necessarily impact the functionality of your application. How to Solve It 1. Check if the build actually fails: Despite these warnings, your build might still complete successfully. These are deprecation warnings, not necessarily build-breaking errors. 2. Update dependencies: Try updating your dependencies to their latest versions, as the package maintainers may have fixed these issues:

   npm update
   # or
   yarn upgrade
   # or
   pnpm update

   npm update
   # or
   yarn upgrade
   # or
   pnpm update

3. If using pnpm: As mentioned in the Nuxt UI Pro installation guide, if you're using pnpm, ensure that you either: - Set shamefully-hoist=true in your .npmrc file - Or install tailwindcss in your project's root directory 4. Check for GitHub issues: You might want to check the Nuxt UI Pro GitHub repository for similar issues or report this if it's causing actual build failures. 5. Temporary workaround: You can suppress these specific deprecation warnings by setting the NODE_NO_WARNINGS=1 environment variable when running your build command. If the build is actually failing (not just showing warnings), you might need to provide more details about the actual error that stops the build process. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

Hum+OP•4d ago

@kapa.ai They're errors not warnings. They extend the build time, I need a fix.

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand that these are errors affecting your build time rather than just warnings. Based on the knowledge sources, this appears to be related to ESM compatibility issues with trailing slashes in package exports. Potential Fix The issue is related to deprecated trailing slash pattern mapping in the "exports" field of package.json files. According to the Nuxt documentation on ES Modules: "Use of deprecated trailing slash pattern mapping './' in the 'exports' field module resolution" is a known issue with ESM compatibility. The recommended solution from the ES Modules Library Author Guide is to: 1. Rename ESM files to end with .mjs (for library authors) 2. Update package.json "exports" field to use proper patterns without trailing slashes Since you're using packages rather than authoring them, you have a few options: 1. Update the problematic packages: Try specifically updating the packages mentioned in the errors:

   npm update @nuxt/icon @iconify/utils @unocss/preset-wind3

   npm update @nuxt/icon @iconify/utils @unocss/preset-wind3

2. Check for pnpm configuration: If you're using pnpm (which appears to be the case from your error logs), make sure you have shamefully-hoist=true in your .npmrc file as mentioned in the Nuxt UI Pro installation guide. 3. Rollup resolution issue: This might be similar to the issue described in this GitHub issue where Rollup failed to resolve imports. In that case, the problem was related to module resolution in a Nuxt layers setup. If these solutions don't work, you might need to: 1. Check if there are any compatibility issues between your Node.js version and the packages 2. Consider temporarily pinning the problematic packages to versions that don't have this issue 3. Report the specific issue to the Nuxt UI Pro repository maintainers with your full build logs The errors specifically mention @nuxt/icon, @iconify/utils, and @unocss/preset-wind3 packages, so focusing on these might help resolve the build time issues. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

Hum+OP•4d ago

@kapa.ai No, I need a fix for the errors with nuxt.icon slash.

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you need a specific fix for the Nuxt Icon trailing slash errors. Based on the knowledge sources, there are a few potential solutions: Fix for Nuxt Icon Trailing Slash Errors The issue appears to be related to the @nuxt/icon package and its dependency on @iconify/utils, which is using deprecated trailing slash patterns in the "exports" field of their package.json. Looking at similar issues in the knowledge sources, this could be related to ESM module resolution problems: 1. Update Nuxt Icon: There's a GitHub issue (#31631) that mentions updating @nuxt/scripts resolved a similar export-related problem. Try updating your Nuxt Icon package:

   npm update @nuxt/icon
   # or with yarn
   yarn upgrade @nuxt/icon
   # or with pnpm
   pnpm update @nuxt/icon

   npm update @nuxt/icon
   # or with yarn
   yarn upgrade @nuxt/icon
   # or with pnpm
   pnpm update @nuxt/icon

2. Check Icon Configuration: According to Nuxt UI's icon documentation, Nuxt UI automatically registers the @nuxt/icon module. Make sure you're not manually registering it again, which could cause conflicts. 3. Vite Configuration Fix: Similar to how Nuxt fixed an alias issue in PR #30587, you might need to provide a fallback alias in your Vite config. This approach was used to fix module resolution issues. In your vite.config.ts or nuxt.config.ts, you could try adding:

   export default defineConfig({
     vite: {
       resolve: {
         alias: {
           '@iconify/utils/': '@iconify/utils'
         }
       }
     }
   })

   export default defineConfig({
     vite: {
       resolve: {
         alias: {
           '@iconify/utils/': '@iconify/utils'
         }
       }
     }
   })

4. Clear Cache: As mentioned in PR #30587, sometimes these issues can be caused by Vite's cache. Try removing the cache directory:

   rm -rf node_modules/.cache/vite

   rm -rf node_modules/.cache/vite

If these solutions don't work, you might need to temporarily downgrade to an earlier version of @nuxt/icon that doesn't have this issue, or report the specific issue to the Nuxt Icon repository maintainers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

Hum+OP•4d ago

@kapa.ai can i downgrade to a working version?

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, you can downgrade to a working version of Nuxt Icon. Based on the knowledge sources, there have been compatibility issues with newer versions of the package. According to a Stack Overflow post about Nuxt Image compatibility issues, you can install a specific version by specifying it in your package manager command:

# Using npm
npm install @nuxt/[email protected]

# Using yarn
yarn add @nuxt/[email protected]

# Using pnpm
pnpm add @nuxt/[email protected]

# Using npm
npm install @nuxt/[email protected]

# Using yarn
yarn add @nuxt/[email protected]

# Using pnpm
pnpm add @nuxt/[email protected]

From the GitHub issue #15500, a user mentioned having the same problem with @nuxt/[email protected], suggesting that earlier versions might work better. Additionally, in another GitHub issue #31631, users discussed downgrading Nuxt to version 16.0/16.1 to resolve similar export-related problems, though they noted the issue was already present in 3.16.0. After downgrading, make sure to clear your cache and node_modules folder before reinstalling dependencies to ensure a clean installation:

rm -rf node_modules
rm -rf .nuxt
rm package-lock.json # or yarn.lock or pnpm-lock.yaml
npm install # or yarn or pnpm install

rm -rf node_modules
rm -rf .nuxt
rm package-lock.json # or yarn.lock or pnpm-lock.yaml
npm install # or yarn or pnpm install

If you continue to experience issues after downgrading, you might need to check compatibility with other packages in your project. I'm sorry I don't have a specific version number that's guaranteed to work in your case, as the knowledge sources don't provide that exact information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

Hum+OP•4d ago

@kapa.ai Build is still hanging on the errors and gave more errors, give me a fix for these errors:

message.txt

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you're still experiencing build errors with Nuxt Icon. Based on the knowledge sources, I can suggest some specific fixes for these trailing slash pattern mapping errors. Potential Fixes for Nuxt Icon Errors 1. Transpile the problematic packages:
According to the Nuxt ESM troubleshooting guide, you can tell Nuxt not to try importing these libraries by adding them to build.transpile:

   export default defineNuxtConfig({
     build: {
       transpile: ['@iconify/utils', '@unocss/preset-wind3']
     }
   })

   export default defineNuxtConfig({
     build: {
       transpile: ['@iconify/utils', '@unocss/preset-wind3']
     }
   })

2. Alias the libraries to CJS versions:
The same guide suggests manually aliasing the library to the CJS version:

   export default defineNuxtConfig({
     alias: {
       '@iconify/utils': '@iconify/utils/lib/index.cjs'
     }
   })

   export default defineNuxtConfig({
     alias: {
       '@iconify/utils': '@iconify/utils/lib/index.cjs'
     }
   })

3. Fix for h3-compression issues:
According to a Stack Overflow post, some users found that h3-compression dependency on version ^0.3.2 was causing similar issues. If you're using this package, consider removing it or pinning to a specific version. 4. Use buildx for Docker builds:
If you're building in Docker, a Stack Overflow post mentions switching from docker build to docker buildx build resolved similar hanging issues. 5. Check for Unicode character issues:
The error might be related to Unicode character issues as mentioned in a Stack Overflow post about RollupError with unexpected characters. This could be caused by corrupted files or encoding issues. 6. Force close and restart:
Based on a GitHub issue, sometimes the dev worker needs to be force closed. Try completely stopping your build process, clearing caches, and restarting. If these solutions don't work, you might need to provide the complete error logs to get more specific help. The knowledge sources don't contain a definitive solution for this exact issue, but these approaches have helped with similar problems. Would you like me to elaborate on any of these potential fixes? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

Hum+OP•4d ago

@kapa.ai find the root cause or provide a fix for each error

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'll analyze the root causes and provide specific fixes for each of the errors you're encountering with Nuxt Icon and related packages. Error 1: Trailing Slash Pattern Mapping in @nuxt/icon and @iconify/utils Root Cause: The error [DEP0155] DeprecationWarning: Use of deprecated trailing slash pattern mapping "./" is occurring because the @iconify/utils package is using an outdated pattern in its package.json "exports" field. This is an ESM compatibility issue. Fix: 1. Transpile the package:

   // nuxt.config.js or nuxt.config.ts
   export default defineNuxtConfig({
     build: {
       transpile: ['@iconify/utils']
     }
   })

   // nuxt.config.js or nuxt.config.ts
   export default defineNuxtConfig({
     build: {
       transpile: ['@iconify/utils']
     }
   })

2. Alias to CJS version:

   export default defineNuxtConfig({
     alias: {
       '@iconify/utils': '@iconify/utils/lib/index.cjs'
     }
   })

   export default defineNuxtConfig({
     alias: {
       '@iconify/utils': '@iconify/utils/lib/index.cjs'
     }
   })

Error 2: Trailing Slash Pattern Mapping in @unocss/preset-wind3 Root Cause: Similar to the first error, @unocss/preset-wind3 is using deprecated trailing slash patterns in its package.json exports field, causing module resolution issues. Fix: 1. Transpile the package:

   export default defineNuxtConfig({
     build: {
       transpile: ['@unocss/preset-wind3']
     }
   })

   export default defineNuxtConfig({
     build: {
       transpile: ['@unocss/preset-wind3']
     }
   })

2. Pin to a compatible version:

   npm install @unocss/[email protected]  # Replace with a known working version

   npm install @unocss/[email protected]  # Replace with a known working version

General Fixes for Both Issues: 1. Update Nuxt Scripts: According to a GitHub issue, updating @nuxt/scripts resolved similar export-related problems:

   npm update @nuxt/scripts

   npm update @nuxt/scripts

2. Clear Vite Cache:

   rm -rf node_modules/.cache/vite

   rm -rf node_modules/.cache/vite

3. Fix package.json exports field: If you have access to modify these packages (e.g., in a local fork), you could update their package.json to use proper ESM exports without trailing slashes, following the ES Modules Library Author Guide. 4. Disable ESM warnings: As a temporary workaround while waiting for package updates, you can disable the warnings:

   NODE_OPTIONS=--no-warnings npm run build

   NODE_OPTIONS=--no-warnings npm run build

If these solutions don't resolve your issues, you might need to: 1. Report the specific issue to the package maintainers 2. Try a completely different icon solution temporarily 3. Provide more detailed error logs for further troubleshooting Would you like me to elaborate on any of these fixes? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

Hum+OP•4d ago

@kapa.ai how can i work around this?

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources and our previous conversation about the Nuxt Icon trailing slash errors, here are practical workarounds you can implement: Immediate Workarounds 1. Transpile the problematic packages:

   // nuxt.config.ts
   export default defineNuxtConfig({
     build: {
       transpile: ['@iconify/utils', '@unocss/preset-wind3']
     }
   })

   // nuxt.config.ts
   export default defineNuxtConfig({
     build: {
       transpile: ['@iconify/utils', '@unocss/preset-wind3']
     }
   })

2. Alias the libraries to their CJS versions:

   // nuxt.config.ts
   export default defineNuxtConfig({
     alias: {
       '@iconify/utils': '@iconify/utils/lib/index.cjs'
     }
   })

   // nuxt.config.ts
   export default defineNuxtConfig({
     alias: {
       '@iconify/utils': '@iconify/utils/lib/index.cjs'
     }
   })

3. Clear Vite's cache which might be causing resolution issues:

   rm -rf node_modules/.cache/vite

   rm -rf node_modules/.cache/vite

4. Temporarily disable the warnings to complete your build:

   NODE_OPTIONS=--no-warnings npm run build
   # or
   NODE_NO_WARNINGS=1 npm run build

   NODE_OPTIONS=--no-warnings npm run build
   # or
   NODE_NO_WARNINGS=1 npm run build

5. Use a different icon solution temporarily until the issue is fixed in the packages. Alternative Approach If you're using SVG icons, you could try the nuxt-svgo module instead of @nuxt/icon. According to a Stack Overflow post, this module allows you to import and use SVGs directly:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: { autoImportPath: '~/assets/svg/' }
})

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: { autoImportPath: '~/assets/svg/' }
})

Then you can use SVG icons without importing them explicitly. If none of these solutions work, you might need to downgrade to specific versions of the problematic packages that don't have these ESM export issues, or report the specific issue to the package maintainers with your complete error logs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

Hum+OP•4d ago

@kapa.ai This is outright dumb.

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand your frustration with the trailing slash errors in Nuxt Icon. These kinds of module resolution issues can be particularly challenging to troubleshoot and fix, especially when they're occurring in dependencies that you don't directly control. If you'd like, I can suggest additional approaches to resolve the issue, or perhaps help you implement one of the workarounds we discussed earlier. Sometimes these Node.js module resolution errors require persistence to solve. Would you like me to focus on a specific workaround from our previous discussion, or is there another aspect of Nuxt that I can help you with? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

Hum+OP•4d ago

@kapa.ai adding transpile doesnt do much

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand that adding the packages to the transpile option didn't resolve your issue with the Nuxt Icon trailing slash errors. Let's explore some other approaches based on the knowledge sources. According to the GitHub issue #31616, there's a specific workaround for similar module resolution issues that might be more effective than just transpiling:

export default defineNuxtConfig({
  nitro: {
    externals: {
      inline: [
        /@iconify[\\/]utils/,
        /@unocss[\\/]preset-wind3/
      ],
    }
  }
})

export default defineNuxtConfig({
  nitro: {
    externals: {
      inline: [
        /@iconify[\\/]utils/,
        /@unocss[\\/]preset-wind3/
      ],
    }
  }
})

This approach forces Nitro to inline these packages rather than externalizing them. As explained in the GitHub issue, "any code that needs import aliases to work needs to be bundled and not externalized. By default, Nitro externalizes all node modules for performance reasons." If that doesn't work, you could try a more comprehensive approach combining multiple fixes: 1. Clear all caches and reinstall dependencies:

   rm -rf node_modules/.cache
   rm -rf .nuxt
   npm install

   rm -rf node_modules/.cache
   rm -rf .nuxt
   npm install

2. Try using both the externals.inline approach and aliasing:

   export default defineNuxtConfig({
     alias: {
       '@iconify/utils': '@iconify/utils/lib/index.cjs'
     },
     nitro: {
       externals: {
         inline: [
           /@iconify[\\/]utils/,
           /@unocss[\\/]preset-wind3/
         ],
       }
     }
   })

   export default defineNuxtConfig({
     alias: {
       '@iconify/utils': '@iconify/utils/lib/index.cjs'
     },
     nitro: {
       externals: {
         inline: [
           /@iconify[\\/]utils/,
           /@unocss[\\/]preset-wind3/
         ],
       }
     }
   })

Would you like me to suggest any other approaches to work around this issue? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

Hum+OP•4d ago

@kapa.ai I cant build using nuxt/ui-pro saas template, using node v22, the codebase is giving me the deprecation warnings and build fals.

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you're having issues building the Nuxt UI Pro SaaS template with Node v22, encountering deprecation warnings that are causing your build to fail. Based on our previous conversation and the knowledge sources, this appears to be related to ESM compatibility issues with trailing slashes in package exports, particularly with @nuxt/icon and related packages. Potential Solutions 1. Try using an earlier Node.js version: Node v22 is quite recent, and there might be compatibility issues with some of the dependencies. Try using Node.js v18 or v20 which are more commonly tested with Nuxt. 2. Add inline externals for problematic packages:

   // nuxt.config.ts
   export default defineNuxtConfig({
     nitro: {
       externals: {
         inline: [
           /@iconify[\\/]utils/,
           /@unocss[\\/]preset-wind3/
         ],
       }
     }
   })

   // nuxt.config.ts
   export default defineNuxtConfig({
     nitro: {
       externals: {
         inline: [
           /@iconify[\\/]utils/,
           /@unocss[\\/]preset-wind3/
         ],
       }
     }
   })

3. Alias problematic packages:

   // nuxt.config.ts
   export default defineNuxtConfig({
     alias: {
       '@iconify/utils': '@iconify/utils/lib/index.cjs'
     }
   })

   // nuxt.config.ts
   export default defineNuxtConfig({
     alias: {
       '@iconify/utils': '@iconify/utils/lib/index.cjs'
     }
   })

4. Check your pnpm configuration (if using pnpm): According to the Nuxt UI Pro installation guide, if you're using pnpm, ensure that you either: - Set shamefully-hoist=true in your .npmrc file - Or install tailwindcss in your project's root directory 5. Clear caches and reinstall dependencies:

   rm -rf node_modules/.cache
   rm -rf .nuxt
   npm ci # or yarn install --frozen-lockfile or pnpm install --frozen-lockfile

   rm -rf node_modules/.cache
   rm -rf .nuxt
   npm ci # or yarn install --frozen-lockfile or pnpm install --frozen-lockfile

If these solutions don't work, you might need to provide more specific error messages from your build process for further troubleshooting. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

Hum+OP•4d ago

@kapa.ai 1. its not 2. breaks build 3. breaks build 4. didnt work 5. nuking the folders and retrying also doesnt work

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you've tried multiple approaches without success. Let's look at a more targeted solution for the Nuxt UI Pro SaaS template build issues with Node v22. Based on the knowledge sources, there's a specific approach that might work for your case: Alternative Solution for Nuxt UI Pro Build Issues 1. Try using a different icon implementation:
Since the errors are specifically related to @nuxt/icon and @iconify/utils, you could try temporarily removing or replacing these with alternatives:

   // nuxt.config.ts
   export default defineNuxtConfig({
     modules: [
       // Comment out or remove '@nuxt/icon' if it's explicitly listed
       // '@nuxt/icon',
       '@nuxt/ui-pro'
     ]
   })

   // nuxt.config.ts
   export default defineNuxtConfig({
     modules: [
       // Comment out or remove '@nuxt/icon' if it's explicitly listed
       // '@nuxt/icon',
       '@nuxt/ui-pro'
     ]
   })

Then use standard HTML or CSS icons as a temporary workaround. 2. Use interopDefault for problematic imports:
According to the ESM troubleshooting guide, you can use interopDefault from the mlly package to handle problematic imports:

   import { interopDefault } from 'mlly'
   
   // Instead of
   // import iconUtils from '@iconify/utils'
   
   // Use
   const iconUtils = interopDefault(await import('@iconify/utils'))

   import { interopDefault } from 'mlly'
   
   // Instead of
   // import iconUtils from '@iconify/utils'
   
   // Use
   const iconUtils = interopDefault(await import('@iconify/utils'))

3. Downgrade Node.js version:
Node v22 is very recent and might have stricter ESM compatibility requirements. Try using Node.js v18 LTS or v20 LTS which are more widely tested with Nuxt. 4. Report the issue to Nuxt UI Pro team:
Since this is a specific issue with the Nuxt UI Pro SaaS template and Node v22, it would be valuable to report this to the Nuxt UI Pro team with your specific error logs. If none of these solutions work, you might need to consider using a different template or waiting for updates to the packages that fix these ESM compatibility issues with Node v22. Would you like me to suggest any other approaches? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

Hum+OP•4d ago

@kapa.ai this is an error caused by nuxtjs/seo

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on your latest information that the error is caused by @nuxtjs/seo, I can provide some specific guidance on this issue. Looking at the knowledge sources, there's relevant information about SEO modules and version compatibility issues in Nuxt: Fix for @nuxtjs/seo Module Issues According to a Stack Overflow post, there can be compatibility issues with Nuxt modules when they're using the wrong version for your Nuxt version. The post specifically mentions a similar error with @nuxtjs/sitemap where it was looking for nitropack which wasn't available. The solution is to ensure you're using the correct version of the SEO module for your Nuxt version: 1. Check module version compatibility: - For Nuxt 2, you should use version 2.x of SEO-related modules - For Nuxt 3, you should use version 3.x 2. Update your package.json:

   # For Nuxt 3
   npm install @nuxtjs/[email protected]
   
   # For Nuxt 2
   npm install @nuxtjs/[email protected]

   # For Nuxt 3
   npm install @nuxtjs/[email protected]
   
   # For Nuxt 2
   npm install @nuxtjs/[email protected]

3. Alternative SEO approach: If you're using Nuxt 3, consider using the built-in SEO capabilities instead of the module. According to the migration guide, you can use:

   // Using the composable
   useSeoMeta({
     title: 'My Amazing Site',
     ogTitle: 'My Amazing Site',
     description: 'This is my amazing site, let me tell you all about it.',
     ogDescription: 'This is my amazing site, let me tell you all about it.',
     ogImage: '<https://example.com/image.png',>
     twitterCard: 'summary_large_image',
   })

   // Using the composable
   useSeoMeta({
     title: 'My Amazing Site',
     ogTitle: 'My Amazing Site',
     description: 'This is my amazing site, let me tell you all about it.',
     ogDescription: 'This is my amazing site, let me tell you all about it.',
     ogImage: '<https://example.com/image.png',>
     twitterCard: 'summary_large_image',
   })

4. Check for ESM compatibility issues: The trailing slash errors you were seeing earlier might be related to ESM compatibility issues in the SEO module. You might need to use the same approach of inlining the module in Nitro:

   export default defineNuxtConfig({
     nitro: {
       externals: {
         inline: [
           /@nuxtjs[\\/]seo/
         ],
       }
     }
   })

   export default defineNuxtConfig({
     nitro: {
       externals: {
         inline: [
           /@nuxtjs[\\/]seo/
         ],
       }
     }
   })

If you can share the specific error message related to the @nuxtjs/seo module, I might be able to provide more targeted advice. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

Gaming

Programming

Nuxt Icon build error with UI Pro

Did you find this page helpful?