#devtools error when running pnpm run dev

29 messages · Page 1 of 1 (latest)

zenith ivyBOT
#

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

#

Nuxt is trying to load DevTools from a global install path:

/usr/local/lib/node_modules/@nuxt/devtools/module.cjs

That means your project (or CLI) is configured to use @nuxt/devtools as a module, but that package is not available at that location.

From the docs, the recommended ways to use DevTools are either:

  • enable it via devtools: { enabled: true } so Nuxt auto‑installs it, or
  • install it locally and list it in modules [Getting started].
// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true }, // preferred

  // OR manual local install:
  modules: [
    '@nuxt/devtools',
  ],
})

Given your error, you likely have something like this in nuxt.config:

modules: [
  '/usr/local/lib/node_modules/@nuxt/devtools/module.cjs',
]

or a similar absolute/global path. That no longer matches the actual install location.

To fix:

  1. Open nuxt.config.ts and:

    • Remove any absolute path to @nuxt/devtools (e.g. /usr/local/lib/...).
    • Either:
      • use devtools: { enabled: true }, and remove @nuxt/devtools from modules, or
      • pnpm add -D @nuxt/devtools and reference it as '@nuxt/devtools' in modules.

  2. If you previously experimented with a local or global DevTools path (like using /users/me/nuxt-devtools/local as described in the contributing guide), revert that to the standard configuration for your project [Contributing].

After adjusting nuxt.config, stop the dev server, run pnpm install if needed, then pnpm dev again.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

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

dusty relic
#

@zenith ivy I'm still getting the same error. This is my nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@nuxt/content',
    '@nuxt/eslint',
    '@nuxt/hints',
    '@nuxt/image',
    '@nuxt/scripts',
    '@nuxt/test-utils',
    '@nuxt/ui',
    '@nuxt/devtools',
  ],
  devtools: { enabled: true },
  future: {
    compatibilityVersion: 4,
  },
  compatibilityDate: '2024-04-03',
})```
zenith ivyBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

The stack trace shows Nuxt trying to load DevTools from a global install path:

/usr/local/lib/node_modules/@nuxt/devtools/module.cjs

but your nuxt.config.ts is using the normal module name:

modules: [
  // ...
  '@nuxt/devtools',
],
devtools: { enabled: true },

So one of these is true:

  1. @nuxt/devtools is not installed locally in your project, or
  2. Your global Nuxt/CLI setup has been modified to point DevTools to that global path.

From the official docs, the supported ways to use DevTools are:

  • let Nuxt auto‑install it with just devtools: { enabled: true }, or
  • install it as a devDependency in the project and add '@nuxt/devtools' to modules. [Getting started]

Nuxt DevTools v2 also requires Nuxt v3.15.0 or higher. [Getting started]

Given that, try the following, step by step:

  1. Install DevTools locally (even if you think it is already installed):

    pnpm add -D @nuxt/devtools

  2. Use only one activation method. For now keep both is fine (Nuxt supports both), but the minimum is:

    // nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/content',
    '@nuxt/eslint',
    '@nuxt/hints',
    '@nuxt/image',
    '@nuxt/scripts',
    '@nuxt/test-utils',
    '@nuxt/ui',
    '@nuxt/devtools', // local package
  ],
  devtools: { enabled: true }, // or keep this and remove from modules
  future: { compatibilityVersion: 4 },
  compatibilityDate: '2024-04-03',
})
#

  1. Make sure you are not using a local/dev “proxy” module path.
    The DevTools contributing guide shows using a custom path like /users/me/nuxt-devtools/local when testing local DevTools builds. [Contributing]
    If you previously did something similar (e.g. edited a global local.ts module or aliased @nuxt/devtools to a global path), revert that change.

  2. Fully restart the dev server after the install:

    pnpm install
pnpm dev

If after installing @nuxt/devtools locally the error still mentions /usr/local/lib/node_modules/@nuxt/devtools/module.cjs, it indicates some global Nuxt/Node configuration is forcing that path, but the provided sources do not describe how to inspect or reset that global mapping. In that case, the knowledge sources do not contain enough information to give a precise next debugging step beyond confirming the local install and config above.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

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

dusty relic
#

@zenith ivy it was an issue with a .nuxtrc file in my home directory but now I get another issue

📎 message.txt
zenith ivyBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Thanks for the follow‑up; that .nuxtrc in your home directory explains why Nuxt was trying to load DevTools from a global path.

To help with the new issue, I need the actual error message and (if relevant) the current nuxt.config.ts and command you’re running (pnpm dev, pnpm build, etc.).

The knowledge sources you provided talk about several Nuxt 4–related issues (CLI 3.30.0 / DevTools routes view errors, Windows build issues, proxy changes, etc.), but they don’t mention your current situation specifically, so without the new error text I can’t reliably map it to one of those known issues or suggest a concrete fix. [Fetch handler error; Can't build on Windows]

Please paste:

  • The full new error stack / terminal output
  • Any recent change you made (e.g. Nuxt version bump, CLI version, module added/removed)

and I’ll narrow it down based on the documented issues.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

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

dusty relic
#

@zenith ivy ERROR Could not locate the bindings file. Tried: 14:46:17 → /Users/james.phillips/Sites/jvs/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/build/better_sqlite3.node → /Users/james.phillips/Sites/jvs/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/build/Debug/better_sqlite3.node → /Users/james.phillips/Sites/jvs/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/build/Release/better_sqlite3.node → /Users/james.phillips/Sites/jvs/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/out/Debug/better_sqlite3.node → /Users/james.phillips/Sites/jvs/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/Debug/better_sqlite3.node → /Users/james.phillips/Sites/jvs/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/out/Release/better_sqlite3.node → /Users/james.phillips/Sites/jvs/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/Release/better_sqlite3.node → /Users/james.phillips/Sites/jvs/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/build/default/better_sqlite3.node → /Users/james.phillips/Sites/jvs/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/compiled/22.16.0/darwin/arm64/better_sqlite3.node → /Users/james.phillips/Sites/jvs/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/addon-build/release/install-root/better_sqlite3.node → /Users/james.phillips/Sites/jvs/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/addon-build/debug/install-root/better_sqlite3.node → /Users/james.phillips/Sites/jvs/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/addon-build/default/install-root/better_sqlite3.node → /Users/james.phillips/Sites/jvs/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/lib/binding/node-v127-darwin-arm64/better_sqlite3.node

zenith ivyBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

This error is coming from the native better-sqlite3 bindings, not from a Nuxt‑specific behavior, and the provided Nuxt knowledge sources don’t mention better-sqlite3 or this bindings‑file lookup at all. The sources only touch on other bundling / native‑module topics like Prisma binaries and Nitro externals, which are conceptually similar but not about better-sqlite3 specifically [Don't bundle dependency].

Because of that, I can’t reliably give you a Nuxt‑specific fix based on the documentation you’ve provided. All I can say with confidence from these sources is:

  • Nuxt/Nitro sometimes needs special configuration for native / binary modules so they are correctly included or left unbundled (e.g. externals.inline, externals.traceInclude, experimental.bundleRuntimeDependencies, unenv.external), but the exact options that would work for better-sqlite3 are not documented here [Don't bundle dependency].
  • There is no explicit mention of better-sqlite3 support or of this “Could not locate the bindings file” error in the Nuxt 4 / Nitro 2 issues you shared.

So, within the limits of the available information:

  • The error means the native .node binding file that better-sqlite3 expects is not found in any of its usual build/compiled paths.
  • The knowledge sources do not contain enough Nuxt‑specific detail to say whether this is due to:
    • a local install/build issue of better-sqlite3,
    • the module being bundled or moved incorrectly by Nitro,
    • or a known Nuxt regression.
#

If you’d like to keep debugging this in a Nuxt context, the next actionable step—beyond what’s in the docs you shared—would be to try adjusting Nitro’s externals/bundling config for better-sqlite3, but I cannot provide a concrete, documented config snippet for this module without going beyond the given sources.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

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

dusty relic
#

@zenith ivy I've solved the issue but now when I run pnpm run dev get an unstyled version of the index page?

zenith ivyBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

If the page renders but looks unstyled, Nuxt usually isn’t loading your global CSS (or it’s being overridden).

From the sources you shared, CSS is typically wired in via nuxt.config:

export default defineNuxtConfig({
  css: [
    '~/assets/styles/main.scss',       // or main.css
    'bootstrap/dist/css/bootstrap.min.css',
    'flatpickr/dist/flatpickr.css',
    '~/assets/css/base.css',
    '/node_modules/primeicons/primeicons.css',
  ],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@/assets/scss/index.scss";',
        },
      },
    },
  },
})

[SASS include paths; Env‑based API URL; Pinia store init]

Given you recently had a .nuxtrc issue and changed config:

  1. Open both ~/.nuxtrc and your project’s nuxt.config.ts and check:

    • Do you still have a css: [...] array pointing to your main stylesheet?
    • If you’re using SCSS globals, is the vite.css.preprocessorOptions.scss.additionalData still present?

  2. If you moved from a custom setup to @nuxt/ui, remember Nuxt UI also has its own CSS that must be added to nuxt.config (the GitHub issue mentions the need for a module to “have CSS file and includ[e] it in nuxt.config.ts” [Nuxt UI install]). Verify that entry is still there.

  3. If you changed layers or modules order, note that Nuxt recently fixed CSS order so child layers can override parent CSS [CSS order fix]. If your styles were coming from another layer, ensure that layer is still included and in the right order.

#

The knowledge sources don’t show your current nuxt.config.ts or how you include CSS, so if checking those points doesn’t help, there isn’t enough information in the docs you provided to pinpoint why your styles are missing now. In that case, please paste your current nuxt.config.ts (especially the css and any vite.css / postcss sections), and I can map it against the documented patterns above.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

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

dusty relic
#

@zenith ivy I don've have a .nuxtrc file. This is my nuxt.config:

export default defineNuxtConfig({
  modules: [
    '@nuxt/content',
    '@nuxt/eslint',
    '@nuxt/hints',
    '@nuxt/image',
    '@nuxt/scripts',
    '@nuxt/test-utils',
    '@nuxt/ui',
  ],
  devtools: { enabled: true },
  future: {
    compatibilityVersion: 4,
  },
  compatibilityDate: '2024-04-03',
})```
zenith ivyBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Your nuxt.config currently has no css entry at all, so Nuxt isn’t loading any global stylesheet. That would explain why you see an unstyled page.

In the examples from the sources, global styles are added via the css option, e.g. [Env‑based API URL; Nuxt 3 + SASS]:

export default defineNuxtConfig({
  css: [
    '~/assets/styles/main.scss',
    'bootstrap/dist/css/bootstrap.min.css',
    'flatpickr/dist/flatpickr.css',
  ],
})

Do the same for your project (adjust paths to match your files):

export default defineNuxtConfig({
  modules: [
    '@nuxt/content',
    '@nuxt/eslint',
    '@nuxt/hints',
    '@nuxt/image',
    '@nuxt/scripts',
    '@nuxt/test-utils',
    '@nuxt/ui',
  ],
  css: [
    '~/assets/styles/main.scss',     // or main.css, etc.
  ],
  devtools: { enabled: true },
  future: {
    compatibilityVersion: 4,
  },
  compatibilityDate: '2024-04-03',
})

If you use SCSS “globals” (mixins, variables) via Vite, also ensure the vite.css.preprocessorOptions.scss.additionalData block is present as in the reference config [Env‑based API URL].

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

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

dusty relic
#

@zenith ivy this is my nuxtrc:

telemetry.enabled=true
telemetry.seed="e3a01c4f90915761"```
zenith ivyBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Those .nuxtrc contents only configure telemetry, they don’t add any CSS or modules:

telemetry.consent=1
telemetry.enabled=true
telemetry.seed="e3a01c4f90915761"

So they aren’t related to your “unstyled index page” issue.

Right now your nuxt.config has no css option, so Nuxt isn’t loading any global styles, which matches an unstyled page. In the examples, global CSS/SCSS is added explicitly in nuxt.config like this: [Env-based URL; Nuxt 3 + SASS]

export default defineNuxtConfig({
  modules: [
    '@nuxt/content',
    '@nuxt/eslint',
    '@nuxt/hints',
    '@nuxt/image',
    '@nuxt/scripts',
    '@nuxt/test-utils',
    '@nuxt/ui',
  ],
  css: [
    '~/assets/styles/main.scss', // or your actual CSS/SCSS file
  ],
  devtools: { enabled: true },
  future: {
    compatibilityVersion: 4,
  },
  compatibilityDate: '2024-04-03',
})

Add your main stylesheet path under css, restart pnpm run dev, and your styles should apply.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: