Nuxt•2d ago

Fresh project with nuxt ui pro and pnpm

I am getting ERROR Named export 'compile' not found. The requested module 'tailwindcss' is a CommonJS module, which may not support all module.exports as named exports. on a monorepo with nuxt 3 & nuxt ui 3. Not sure what the cause is of this. Can anyone provide some guidance?

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/ui": "3.0.0-alpha.8",
    "nuxt": "^3.14.159",
    "tailwindcss": "4.0.0-alpha.34",
    "vue": "latest",
    "vue-router": "latest"
  }
}

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/ui": "3.0.0-alpha.8",
    "nuxt": "^3.14.159",
    "tailwindcss": "4.0.0-alpha.34",
    "vue": "latest",
    "vue-router": "latest"
  }
}

5 Replies

kapa.ai•2d ago

Hi @Hro. 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 your question and the knowledge sources available, it appears that you're encountering an issue related to CommonJS and ES Module compatibility in your Nuxt 3 project with Nuxt UI. Let's address this problem: 1. The error you're seeing suggests that there's a mismatch between the module systems being used. Specifically, it's trying to import a named export 'compile' from 'tailwindcss', but it's treating 'tailwindcss' as a CommonJS module. 2. One potential cause of this issue could be related to the versions of the packages you're using. I notice that you're using alpha versions of both @nuxt/ui and tailwindcss. Alpha versions are often unstable and may have compatibility issues. 3. To resolve this, I would recommend the following steps: a. Update your tailwindcss to the latest stable version. As of now, that would be ^3.4.0 instead of the alpha version you're using. b. Make sure your @nuxt/ui version is compatible with the Nuxt version you're using. The latest stable version of @nuxt/ui is ^2.14.1 as of my knowledge cutoff. c. Ensure that your nuxt.config.ts file is properly configured to use these modules. It should include something like this:

   export default defineNuxtConfig({
     modules: ['@nuxt/ui']
   })

   export default defineNuxtConfig({
     modules: ['@nuxt/ui']
   })

4. If the issue persists after these changes, you might need to try transpiling the problematic packages. You can do this by adding the following to your nuxt.config.ts:

   export default defineNuxtConfig({
     build: {
       transpile: ['tailwindcss']
     }
   })

   export default defineNuxtConfig({
     build: {
       transpile: ['tailwindcss']
     }
   })

This is based on the advice from the Nuxt documentation on troubleshooting ESM issues (https://nuxt.com/docs/guide/concepts/esm#troubleshooting-esm-issues). 5. If you're still encountering issues, it might be worth checking if there are any conflicts with other packages in your monorepo setup. Remember, when working with a monorepo, ensure that all your packages are using compatible versions and that your workspace is set up correctly for pnpm. If these steps don't resolve your issue, you might want to consider creating a minimal reproduction of the problem and seeking help from the Nuxt community (https://nuxt.com/docs/community/reporting-bugs#figure-out-what-the-cause-might-be) or opening an issue on the Nuxt UI GitHub repository. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

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

manniL•2d ago

Would be easier with a running reproduction

HroOP•2d ago

I was trying to do this as a standalone folder, there everything works pefect. So looks like a pnpm monorepo issue. Managed to resolve the obeve with using npm workspaces. However during nuxt dev I now run into this:

Internal server error: Failed to resolve import "/Volumes/Sites/dartsspace/node_modules/tailwindcss/tailwind.css" from "virtual:nuxt:/Volumes/Sites/dartsspace/frontend/app/.nuxt/css.mjs". Does the file exist?

Internal server error: Failed to resolve import "/Volumes/Sites/dartsspace/node_modules/tailwindcss/tailwind.css" from "virtual:nuxt:/Volumes/Sites/dartsspace/frontend/app/.nuxt/css.mjs". Does the file exist?

"/Volumes/Sites/dartsspace/node_modules/tailwindcss/tailwind.css" should be pointing at the project folder node modules instead

HroOP•2d ago

looks like it's going wrong here: https://github.com/nuxt-modules/tailwindcss/blob/4a050097a359f61def5ce7ef782b42829a352b31/src/resolvers.ts#L97 For now I have added a assets/css/tailwind.css file with the same contents

GitHub

tailwindcss/src/resolvers.ts at 4a050097a359f61def5ce7ef782b42829a3...

Tailwind CSS module for Nuxt. Contribute to nuxt-modules/tailwindcss development by creating an account on GitHub.

Gaming

Programming

Fresh project with nuxt ui pro and pnpm