Nuxt•4w 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?

5 Replies

kapa.ai•4w ago

Hi @Alejandro Mery. 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 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 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 createResolver function from Nuxt Kit. This function is specifically designed for resolving paths in Nuxt modules and plugins. Here's how you can use it: 1. First, import createResolver from @nuxt/kit:

import { createResolver } from '@nuxt/kit'

import { createResolver } from '@nuxt/kit'

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

const { resolve } = createResolver(import.meta.url)

const { resolve } = createResolver(import.meta.url)

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

const dependencyPath = resolve('your-dependency-name')

const dependencyPath = resolve('your-dependency-name')

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:

import { defineNuxtPlugin } from '#app'
import { createResolver } from '@nuxt/kit'

export default defineNuxtPlugin((nuxtApp) => {
  const { resolve } = createResolver(import.meta.url)
  const dependencyPath = resolve('your-dependency-name')
  
  // Use dependencyPath as needed
})

import { defineNuxtPlugin } from '#app'
import { createResolver } from '@nuxt/kit'

export default defineNuxtPlugin((nuxtApp) => {
  const { resolve } = createResolver(import.meta.url)
  const dependencyPath = resolve('your-dependency-name')
  
  // Use dependencyPath as needed
})

This method is recommended by Nuxt for resolving paths in modules and plugins, as demonstrated in the Nuxt documentation on resolving. 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 :speech_balloon: ----------------------

kapa.ai•4w ago

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

Alejandro MeryOP•4w ago

using the resolver created by @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•4w ago

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

Alejandro MeryOP•4w ago

it gets installed, sure, but tailwindcss needs the path to the components in the generated config file, to scan them I added a function to the vue components library to expose it's own path, and it seems to work.

/** @returns the directory path to the `@poupe/vue` package */
export const contentPath = () => dirname(new URL(import.meta.url).pathname);

/** @returns the glob patterns needed by tailwindcss to scan classes */
export const contentGlobs = (): string[] => {
  const path = contentPath();
  return [
    `${path}/index.mjs`,
    `${path}/**/*.vue`,
  ];
};

/** @returns the directory path to the `@poupe/vue` package */
export const contentPath = () => dirname(new URL(import.meta.url).pathname);

/** @returns the glob patterns needed by tailwindcss to scan classes */
export const contentGlobs = (): string[] => {
  const path = contentPath();
  return [
    `${path}/index.mjs`,
    `${path}/**/*.vue`,
  ];
};

Gaming

Programming

path to dependency

Did you find this page helpful?