Devtools: In dev mode getting "Devtools inspection is not available because it's in production mode or explicitly disabled by the author"

Environment

Nuxt project info:

---

• Operating System: Darwin
• Node Version: v16.12.0
• Nuxt Version: 3.0.0-27307420.6a25d3e
• Package Manager: yarn@1.22.4
• Bundler: Vite
• User Config: buildModules, dev, build, intlify, publicRuntimeConfig
• Runtime Modules: -
• Build Modules: @intlify/nuxt3@0.1.9

---

Reproduction

n/a

Describe the bug

Starting nuxt with yarn dev or yarn dev --devtools, with or without dev: true in config, in any case getting from vue devtools:

Nuxt.js + Vue.js is detected on this page. Devtools inspection is not available because it’s in production mode or explicitly disabled by the author.

Additional context

No response

Logs

No response

[upepo-mwindaji]

If you are experiencing this issue on a cloud VM dev environment (e.g. Codespace), try updating your vite config as per #6096

[mlpierce22]

Not sure if this will help anybody, but I my issue was the build.transpile option. I need this for prod builds, not development, so I just changed it to the following and it seems to work for now:

  build: {
    transpile: process.env.NODE_ENV === "development" ? [] : ["element-plus"],
  },

After playing around a little while, I think that this is either an uncaught error or a race condition of some kind because it’s very finicky. I found that I can reproduce it consistently by putting an incorrect css path into the nuxt config (devtools not found, and no errors thrown except file not found at runtime).

Using devtools v6.1.4 Repro: https://stackblitz.com/edit/github-b6sebj?file=nuxt.config.ts&view=editor