升级Node/NPM后运行Nuxt3出现Invalid URL()请求错误，求解决方案

问题背景 #

已将Node升级至v16.18.0、NPM升级至18.19.2，删除node_modules和.nuxt目录后重新安装依赖。

package.json配置 #

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^5.1.2",
    "@tailwindcss/aspect-ratio": "^0.4.0",
    "@tailwindcss/forms": "^0.5.2",
    "@vueuse/nuxt": "^8.7.4",
    "autoprefixer": "^10.4.7",
    "nuxt": "3.0.0-rc.3",
    "postcss": "^8.4.14"
  },
  "dependencies": {
    "@headlessui/vue": "^1.6.4",
    "@heroicons/vue": "^1.0.6",
    "@pinia/nuxt": "^0.1.9",
    "@tailwindcss/line-clamp": "^0.4.0",
    "@vueuse/core": "^8.7.4",
    "chart.js": "^3.8.0",
    "chartjs-adapter-date-fns": "^2.0.0",
    "date-fns": "^2.28.0",
    "dayjs": "^1.11.5",
    "json-to-csv-export": "^1.1.0",
    "jwt-decode": "^3.1.2",
    "pinia": "^2.0.14",
    "pinia-plugin-persistedstate": "^1.6.1",
    "vue-chartjs": "^4.1.1",
    "vue-gtag": "^2.0.1",
    "vue-tailwind-datepicker": "^1.1.0"
  }
}

nuxt.config.ts配置 #

import {defineNuxtConfig} from 'nuxt'

export default defineNuxtConfig({
  components: true,
  modules: ['@nuxtjs/tailwindcss', '@pinia/nuxt', '@vueuse/nuxt'],
  build: {
    transpile: ['@heroicons/vue', 'date-fns', 'chartjs-adapter-date-fns', 'chart.js']
  },
  tailwindcss: {
    jit: true,
    exposeConfig: true,
    configPath: '~/tailwind.config.js'
  }
})

报错信息 #

运行npm run dev时出现以下错误：

[nuxt] [request error] Invalid URL ()
  at async $fetchRaw2 (<dir>/node_modules/ohmyfetch/dist/chunks/fetch.mjs:131:20)
  at async default (<dir>/node_modules/@nuxt/vite-builder/dist/runtime/vite-node.mjs:16:23)
  at async Object.renderToString (<dir>/node_modules/vue-bundle-renderer/dist/index.mjs:264:19)
  at async <dir>/.nuxt/dev/index.mjs:465:20
  at async <dir>/node_modules/h3/dist/index.mjs:420:19
  at async Server.nodeHandler (<dir>/node_modules/h3/dist/index.mjs:370:7)

排查与解决步骤 #

1. 升级Nuxt到稳定版 #

当前使用的3.0.0-rc.3是早期候选版本，存在大量未修复的bug。直接升级到最新稳定版：

• 修改package.json中nuxt版本为^3.10.0（或最新稳定版）
• 执行npm install重装依赖

2. 检查无效的$fetch调用 #

错误来自ohmyfetch模块，说明项目中存在调用$fetch/useFetch/useAsyncData时未传入合法URL的情况：

• 全局搜索代码中的这些API
• 确认所有请求都传入了完整有效的URL，避免空字符串或未定义变量作为参数

3. 精简transpile配置 #

Nuxt3的自动transpile机制已能处理大部分依赖，尝试移除不必要的配置：

• 修改nuxt.config.ts的build.transpile列表，删除chart.js、date-fns等包
• 重启开发服务观察错误是否消失

4. 校验环境变量 #

如果项目用环境变量存储API地址：

• 检查.env文件中的URL变量是否正确定义，无空值
• 确认nuxt.config.ts中已通过runtimeConfig暴露这些变量

5. 彻底清理缓存重建 #

执行以下命令清理所有缓存后重启服务：

rm -rf node_modules .nuxt .output package-lock.json
npm install
npm run dev

内容的提问来源于stack exchange，提问作者Mathijs