Nuxt•4w ago

TailwindCSS/Nesting error

Hey guys, i got an error in nuxt3 with the newest nuxt ui pro version. i think it has something todo with pnpm [17:51:23] WARN [nuxt] could not import postcss plugin tailwindcss/nesting with ESM. Please report this as a bug. [17:51:23] ERROR Cannot start nuxt: Package subpath './nesting' is not defined by "exports" in C:\Users\Comma\Documents\Own\jghost\jghost-frontend\node_modules.pnpm\node_modules\tailwindcss\package.json

3 Replies

kapa.ai•4w ago

Hi @Joshua Gerke. 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 information provided in the knowledge sources, I don't have specific details about this particular error. However, I can offer some general advice based on Nuxt's bug reporting guidelines and the information you've shared. The error you're encountering seems to be related to TailwindCSS and its nesting feature, which is not directly covered in the provided knowledge sources. However, there are a few things you can try: 1. Update to the latest version: Make sure you're using the latest version of Nuxt UI Pro. You can do this by updating your package.json as described in the Nuxt UI Pro Edge documentation (https://ui.nuxt.com/pro/getting-started/installation#edge):

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

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

Then run pnpm install. 2. Check for compatibility issues: Ensure that all your dependencies, including TailwindCSS, are compatible with the version of Nuxt you're using. 3. Clean install: Try removing your node_modules folder and pnpm-lock.yaml file, then run pnpm install again. 4. Report the bug: If the issue persists, it might be a bug. As suggested in the Nuxt bug reporting guidelines (https://nuxt.com/docs/community/reporting-bugs#figure-out-what-the-cause-might-be), try to determine if the issue is with Nuxt UI Pro, TailwindCSS, or another dependency. 5. Check for known issues: Look for similar issues in the Nuxt UI Pro or TailwindCSS GitHub repositories. If none of these steps resolve the issue, you may need to report this as a bug to the Nuxt UI Pro or TailwindCSS team, providing them with your full environment details and steps to reproduce the error. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

Joshua GerkeOP•4w ago

this is my 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"
  },
  "dependencies": {
    "@iconify-json/heroicons": "^1.2.1",
    "@iconify-json/simple-icons": "^1.2.9",
    "@nuxt/content": "^2.13.4",
    "@nuxt/fonts": "^0.10.2",
    "@nuxt/image": "^1.8.1",
    "@nuxt/ui": "3.0.0-alpha.7",
    "@pinia/nuxt": "^0.5.5",
    "@vueuse/nuxt": "^11.1.0",
    "@nuxtjs/tailwindcss": "6.12.2-20241014-164133-9d42549",
    "nuxt": "^3.13.2",
    "nuxt-og-image": "^3.0.6",
    "pinia": "^2.2.4",
    "tailwindcss": "4.0.0-alpha.30"
  },
  "devDependencies": {
    "@nuxt/eslint": "^0.6.0",
    "@nuxthq/studio": "^2.1.1",
    "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@latest",
    "eslint": "^9.13.0",
    "vue-tsc": "^2.1.6"
  },
  "resolutions": {
    "@nuxtjs/tailwindcss": "nightly"
  },
  "packageManager": "[email protected]+sha512.4abf725084d7bcbafbd728bfc7bee61f2f791f977fd87542b3579dcb23504d170d46337945e4c66485cd12d588a0c0e570ed9c477e7ccdd8507cf05f3f92eaca"
}

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@iconify-json/heroicons": "^1.2.1",
    "@iconify-json/simple-icons": "^1.2.9",
    "@nuxt/content": "^2.13.4",
    "@nuxt/fonts": "^0.10.2",
    "@nuxt/image": "^1.8.1",
    "@nuxt/ui": "3.0.0-alpha.7",
    "@pinia/nuxt": "^0.5.5",
    "@vueuse/nuxt": "^11.1.0",
    "@nuxtjs/tailwindcss": "6.12.2-20241014-164133-9d42549",
    "nuxt": "^3.13.2",
    "nuxt-og-image": "^3.0.6",
    "pinia": "^2.2.4",
    "tailwindcss": "4.0.0-alpha.30"
  },
  "devDependencies": {
    "@nuxt/eslint": "^0.6.0",
    "@nuxthq/studio": "^2.1.1",
    "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@latest",
    "eslint": "^9.13.0",
    "vue-tsc": "^2.1.6"
  },
  "resolutions": {
    "@nuxtjs/tailwindcss": "nightly"
  },
  "packageManager": "[email protected]+sha512.4abf725084d7bcbafbd728bfc7bee61f2f791f977fd87542b3579dcb23504d170d46337945e4c66485cd12d588a0c0e570ed9c477e7ccdd8507cf05f3f92eaca"
}

Gaming

Programming

TailwindCSS/Nesting error