Dan H Posts - Answer Overflow

Dan H

•Created by Dan H on 3/25/2025 in #❓・help

"dirname" is not exported by "__vite-browser-external", imported by "nuxt.config.ts"

I have a Nuxt layer that I publish to a private NPM feed, and install into a few different Nuxt sites. After updating to Nuxt 3.16, some of the sites error like this when building: WARN [plugin vite:resolve] Module "url" has been externalized for browser compatibility, imported by "~/node_modules/my-layer/nuxt.config.ts". WARN [plugin vite:resolve] Module "path" has been externalized for browser compatibility, imported by "~/node_modules/my-layer/nuxt.config.ts". ℹ ✓ 1056 modules transformed.
ERROR ✗ Build failed in 58.83s
ERROR Nuxt Build Error: node_modules/my-layer/nuxt.config.ts (2:9): "dirname" is not exported by "__vite-browser-external", imported by "node_modules/my-layer/nuxt.config.ts". nuxi file: ~/node_modules/my-layer/nuxt.config.ts:2:9 1: import { fileURLToPath } from "url"; 2: import { dirname, join } from "path"; ^ 3: // This is used to resolve full paths to the CSS files, per https://nuxt.com/docs/guide/going-further/layers#relative-paths-and-aliases 4: const currentDir = dirname( fileURLToPath( import.meta.url ) ); I've diffed my sites' package.json and nuxt.config.ts files and can't see any clues as to why some work and some don't. Package updates don't make a difference. All run the same version of Node and pnpm. Switching package manager to npm didn't help. Changing the imports in the Nuxt layer to include node: didn't help. Any ideas, anyone? Thanks in advance

9 replies

NNuxt

•Created by Dan H on 5/19/2023 in #❓・help

How do I include a SCSS file in my Nuxt module?

How do I include a SCSS file in my Nuxt module please? When developing locally, the below works as intended. However, when I package and install the module in a site, it complains that it can't find node_modules/foo/dist/runtime/main.scss. It looks like I need to either change the resolver to point at src/runtime/main.scss, or dist/runtime/main.css when packaged, but I don't know how to achieve that.

import { fileURLToPath } from "url";
import {
  defineNuxtModule,
  createResolver
} from "@nuxt/kit";

export default defineNuxtModule( {
  meta: {
    name: "foo",
    version: "1.0",
    configKey: "foo"
  },
  setup ( _, nuxt ) {
    const { resolve } = createResolver( import.meta.url );

    const runtimeDir = fileURLToPath( new URL( "./runtime", import.meta.url ) );
    nuxt.options.css.unshift(
      resolve( runtimeDir, "./main.scss" )
    );
  }
} );

import { fileURLToPath } from "url";
import {
  defineNuxtModule,
  createResolver
} from "@nuxt/kit";

export default defineNuxtModule( {
  meta: {
    name: "foo",
    version: "1.0",
    configKey: "foo"
  },
  setup ( _, nuxt ) {
    const { resolve } = createResolver( import.meta.url );

    const runtimeDir = fileURLToPath( new URL( "./runtime", import.meta.url ) );
    nuxt.options.css.unshift(
      resolve( runtimeDir, "./main.scss" )
    );
  }
} );

Thanks

3 replies

NNuxt

•Created by Dan H on 11/29/2022 in #❓・help

Can you use definePageMeta within pages registered by a module?

I am registering some pages using the extendPages function within a module, but seeing the following warning while running the site:

definePageMeta() is a compiler-hint helper that is only usable inside the script block of a single file component which is also a page. Its arguments should be compiled away and passing it at runtime has no effect.

definePageMeta() is a compiler-hint helper that is only usable inside the script block of a single file component which is also a page. Its arguments should be compiled away and passing it at runtime has no effect.

I have added the call within <script setup> of my pages, it isn't used anywhere else, and only has static values supplied. I'm not sure if I'm doing something wrong? Thanks

7 replies

Gaming

Programming