Nuxt•2w ago

Build error after upgrading to 3.15.4 - No "exports" main defined ... unicorn-magic 🦄

Full error after npm run build:

[nuxi 8:26:08 AM]  ERROR  Nuxt Build Error: [vite:css] [postcss] No "exports" main defined in /Users/david.marr/code/xyz/node_modules/globby/node_modules/unicorn-magic/package.json
file: /Users/david.marr/code/xyz/src/assets/css/tailwind.css:undefined:NaN

[nuxi 8:26:08 AM]  ERROR  Nuxt Build Error: [vite:css] [postcss] No "exports" main defined in /Users/david.marr/code/xyz/node_modules/globby/node_modules/unicorn-magic/package.json
file: /Users/david.marr/code/xyz/src/assets/css/tailwind.css:undefined:NaN

Is there some way to fix this that anyone can help with?

8 Replies

kapa.ai•2w ago

Hi @dmarr. 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 knowledge sources provided, I don't have specific information about this exact error with Nuxt 3.15.4 and unicorn-magic. However, I can provide some general guidance based on similar issues: 1. This error seems to be related to a dependency issue, specifically with the unicorn-magic package. 2. One possible solution, as suggested in a similar case, is to try transpiling the problematic package. You can add the following to your nuxt.config.ts file:

export default defineNuxtConfig({
  build: {
    transpile: ['unicorn-magic']
  }
})

export default defineNuxtConfig({
  build: {
    transpile: ['unicorn-magic']
  }
})

3. If that doesn't work, you might need to check if there's an update available for the unicorn-magic package or any of its parent dependencies. 4. Another approach, as mentioned in the Nuxt documentation on troubleshooting ESM issues, is to manually alias the library to its CommonJS version. You could try adding this to your nuxt.config.ts:

export default defineNuxtConfig({
  alias: {
    'unicorn-magic': 'unicorn-magic/dist/unicorn-magic.cjs.js'
  }
})

export default defineNuxtConfig({
  alias: {
    'unicorn-magic': 'unicorn-magic/dist/unicorn-magic.cjs.js'
  }
})

5. If these solutions don't work, you might need to investigate further by checking the compatibility of all your dependencies with Nuxt 3.15.4. 6. As a last resort, you could consider temporarily downgrading Nuxt to a previous version where this error didn't occur, while waiting for a fix or update from the unicorn-magic package maintainers. If none of these suggestions resolve the issue, you may need to open an issue on the Nuxt GitHub repository with more details about your project setup and dependencies. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

dmarrOP•2w ago

I think i've narrowed the issue down to using @nuxt/kit createResolver in my tailwindConfig. Since i am authoring a layer, the content setting for tailwind should be relative to the layer directory. @kapa.ai using @nuxt/kit createResolver in my tailwindConfig appears to cause the error

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the information provided in the knowledge sources, it appears that there have been some issues related to the use of createResolver from @nuxt/kit in recent Nuxt versions. This could be related to your problem with using createResolver in your Tailwind configuration. The Github Issue #30362 mentions warnings about @nuxt/kit versions, which could be related to your issue. Additionally, Github Issue #30795 discusses problems with resolving modules after upgrading to Nuxt 3.15.3. To address this issue, you could try the following: 1. Check your Nuxt version and ensure it's compatible with the version of @nuxt/kit you're using. 2. If possible, avoid using createResolver in your Tailwind configuration. Instead, try using absolute paths or other methods to resolve your files. 3. If you must use createResolver, make sure you're using it correctly. According to the Nuxt documentation on createResolver, it should be used like this:

   const resolver = createResolver(import.meta.url)
   // Then use resolver.resolve() to resolve paths

   const resolver = createResolver(import.meta.url)
   // Then use resolver.resolve() to resolve paths

4. If the issue persists, you might need to temporarily downgrade Nuxt to a version where this worked correctly for you. 5. As a workaround, you could try moving the Tailwind configuration that uses createResolver into a separate file that doesn't rely on Nuxt's module resolution. If none of these solutions work, it might be worth opening an issue on the Nuxt GitHub repository with a minimal reproduction of your setup, as this could be a bug in the latest Nuxt version. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

dmarrOP•2w ago

@kapa.ai will tailwind be able to resolve components in a nuxt layer and the app without using a resolver?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources provided, I can offer some insights about Tailwind CSS and Nuxt layers, but there isn't specific information about Tailwind resolving components in a Nuxt layer without using a resolver. However, I can provide some relevant information: 1. Nuxt automatically handles component auto-imports for both the main application and any layers you might be using. This is part of Nuxt's built-in functionality, as described in the Nuxt documentation on components. 2. Tailwind CSS integration in Nuxt is typically handled by the @nuxtjs/tailwindcss module, which is pre-configured when you use Nuxt UI. This module should automatically scan and process your components, including those in Nuxt layers. 3. The Nuxt documentation on layers mentions that layers extend your Nuxt application, allowing you to share and reuse Nuxt config, custom components, composables, and more across projects. However, there are some potential issues to be aware of: 1. As mentioned in a Github issue comment, there have been some problems with type resolution when using aliases in Nuxt layers, particularly when importing from remote layer sources. 2. The same issue suggests that using relative imports within the layer works correctly, while using aliases can cause problems. Given this information, it's likely that Tailwind CSS will be able to resolve and process components in both your Nuxt layer and the main application without needing to use a custom resolver, as long as you're using the standard Nuxt and Tailwind CSS setup. The auto-import feature of Nuxt should handle component resolution, and the Tailwind CSS module should be able to scan and process these components. However, if you're experiencing specific issues, you might need to adjust your configuration or file structure. If problems persist, it would be advisable to create a minimal reproduction of your setup and open an issue on the Nuxt or Nuxt Tailwind CSS module GitHub repository for more specific guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

Gaming

Programming

Build error after upgrading to 3.15.4 - No "exports" main defined ... unicorn-magic 🦄

Did you find this page helpful?