Nuxt•2w ago

"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

Nuxt

Authoring Nuxt Layers · Nuxt Advanced

Nuxt provides a powerful system that allows you to extend the default files, configs, and much more.

5 Replies

kapa.ai•2w ago

Hi @Dan H. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This issue is related to a known problem in Nuxt 3.16.0 with path aliases and imports in Nuxt layers. Let me explain what's happening and provide some solutions. The Issue The error you're seeing is related to how Nuxt 3.16.0 handles imports in layer configurations. Several similar issues have been reported after upgrading to Nuxt 3.16.0: 1. Path aliases not being properly generated in tsconfig.server.json GitHub Issue #31325 2. Alias configuration not working properly GitHub Issue #31339 3. Issues with Vite dependency optimization for aliases within .c12 layers GitHub Issue #30978 Solutions 1. Use the recommended pattern for Nuxt layers According to the Nuxt documentation, when using relative paths in a layer's nuxt.config.ts file, you should use full resolved paths:

import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

const currentDir = dirname(fileURLToPath(import.meta.url))

export default defineNuxtConfig({
  css: [
    join(currentDir, './assets/main.css')
  ]
})

import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

const currentDir = dirname(fileURLToPath(import.meta.url))

export default defineNuxtConfig({
  css: [
    join(currentDir, './assets/main.css')
  ]
})

This is exactly what you're doing, but there seems to be an issue with how Vite is handling these imports in Nuxt 3.16.0. 2. Try using Node.js protocol imports You can try modifying your imports to use the Node.js protocol prefix:

import { fileURLToPath } from 'node:url'
import { dirname, join } from 'node:path'

import { fileURLToPath } from 'node:url'
import { dirname, join } from 'node:path'

3. Wait for the patch release According to comments in the GitHub issues, these problems have been fixed and will be included in the next patch release (3.16.1). One of the Nuxt team members confirmed that a fix has been merged in PR #31278. 4. Downgrade to Nuxt 3.15.4 As a temporary workaround, you could downgrade to Nuxt 3.15.4, which doesn't have these issues. Several users reported that downgrading resolved similar problems. Conclusion This appears to be a regression in Nuxt 3.16.0 that affects how path aliases and imports are handled in Nuxt layers. The issue has been acknowledged by the Nuxt team and a fix is coming in the next patch release. In the meantime, you can try the workarounds mentioned above or downgrade to Nuxt 3.15.4. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

Dan HOP•2w ago

Nuxt 3.16.1 didn't resolve it for me, as I still encountered it today when trying to update to that version.

ved•2w ago

Hi, See if this package helps: https://github.com/davidmyersdev/vite-plugin-node-polyfills These people had a similar issue that was apparently fixed with this: https://github.com/vitejs/vite/discussions/8799

Dan HOP•2w ago

Thank you - I’ll try that first thing tomorrow! Just a quick update on this, it turns out it was due to an import in my website project for something that no longer existed in my layer project. The error message is exceedingly unhelpful and irrelevant to the real issue, but it makes sense that it didn't work

Gaming

Programming

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

Did you find this page helpful?