Nuxt•11mo ago

path to dependency

I'm working on a nuxt plugin to integrate a vue+tailwind components library.
for tailwindcss to work the files from that library need to be referenced in the generated config file.

I've had some success using:

export const resolvePackage = (pkg: string): string => new URL(import.meta.resolve(pkg)).pathname;

export const resolvePackage = (pkg: string): string => new URL(import.meta.resolve(pkg)).pathname;

it it often explodes with an error I fail to understand:

ERROR  Error while importing module @poupe/nuxt: SyntaxError: Cannot use 'import.meta' outside a module

ERROR  Error while importing module @poupe/nuxt: SyntaxError: Cannot use 'import.meta' outside a module

https://github.com/poupe-ui/poupe/blob/main/packages/poupe-nuxt/src/tailwind.ts#L13

any suggestion on how to get that path?

kapa.ai•2/2/25, 2:07 AM

Hi @Alejandro Mery. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•2/2/25, 2:08 AM

----------------------
Based on the knowledge sources provided and your question, I can offer some insights and suggestions for resolving the path to your dependency in a Nuxt plugin.

The error you're encountering suggests that

import.meta

import.meta

is not available in the context where you're trying to use it. This is likely because the code is being executed in a CommonJS environment rather than an ES module context.

To address this issue and get the path to your dependency, you can use the function from Nuxt Kit. This function is specifically designed for resolving paths in Nuxt modules and plugins. Here's how you can use it:

First, import from
```
@nuxt/kit
```
```
@nuxt/kit
```
:

Then, create a resolver using the current file's path:

Now you can use the function to get the path to your dependency:

This approach should work reliably in both CommonJS and ES module contexts within Nuxt.

Here's an example of how you might use this in your plugin:

This method is recommended by Nuxt for resolving paths in modules and plugins, as demonstrated in the Nuxt documentation on resolving.

kapa.ai•2/2/25, 2:08 AM

If you're still encountering issues, it might be worth checking if your Nuxt configuration is set up correctly for ES modules, as described in the Nuxt ESM documentation.

Nuxt Kit Resolving
Nuxt ESM Troubleshooting
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•2/2/25, 2:08 AM

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

Alejandro MeryOP•2/2/25, 2:09 AM

using the resolver created by

@nuxt/kit

@nuxt/kit

I get a path that assumes 'your-dependency-name' is a file within the dist/ of the current package, not to the dist of the dependency

dmarr•2/2/25, 2:25 AM

The dep should be brought into whatever app is installing your module. Assuming your module has it as a normal dep and not a devdep

Ddmarr The dep should be brought into whatever app is installing your module. Assuming ...

Alejandro MeryOP•2/2/25, 3:46 AM

it gets installed, sure, but tailwindcss needs the path to the components in the generated config file, to scan them

Alejandro MeryOP•2/2/25, 5:00 AM

I added a function to the vue components library to expose it's own path, and it seems to work.