Nuxt3执行npm run generate时触发isCE/namespaceURI空值读取错误

开发环境（nuxt dev）运行正常，但执行npm run generate生成静态站点时出现以下错误：

TypeError: Cannot read properties of null (reading 'isCE')
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'namespaceURI')

怀疑问题出在插件配置，以下是相关配置文件：

配置文件 #

根目录nuxt.config.js #

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  target: 'static',
  css: [
      '~/assets/global.scss'
  ],
  router: {
      base: '/'
  }
})

plugins/leaflet.client.js #

import L from 'leaflet'
import 'leaflet.markercluster';
import 'leaflet-fullscreen';
import 'leaflet-sidebar';
import 'leaflet.vectorgrid';
export default defineNuxtPlugin(nuxtApp => {
  return {
      provide: {
        L
      }
    }
})

plugins/useBootStrap.client.ts #

import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.provide('bootstrap', bootstrap)
  nuxtApp.provide('Tooltip', bootstrap)
  nuxtApp.provide('Carousel', bootstrap)
})

package.json #

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@geoman-io/leaflet-geoman-free": "^2.13.0",
    "@popperjs/core": "^2.11.6",
    "@vue-leaflet/vue-leaflet": "^0.6.1",
    "axios": "^0.27.2",
    "bootstrap": "^5.2.0",
    "https": "^1.0.0",
    "leaflet": "^1.9.1",
    "leaflet-fullscreen": "^1.0.2",
    "leaflet-sidebar": "^0.2.4",
    "leaflet.markercluster": "^1.5.3",
    "leaflet.vectorgrid": "^1.3.0",
    "topojson-client": "^3.1.0",
    "vue-google-charts": "^1.1.0",
    "vue-gtag": "^2.0.1"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.1",
    "nuxt": "3.0.0-rc.11",
    "sass": "^1.55.0",
    "sass-loader": "^13.0.2",
    "vite": "^3.0.9",
    "vite-plugin-mkcert": "^1.9.0"
  }
}

问题原因 #

这两个错误的核心是：静态生成阶段（SSG）在Node环境执行，没有浏览器的DOM环境。Leaflet和Bootstrap的初始化逻辑依赖window、document等浏览器对象，服务端预渲染时这些对象不存在，导致读取null属性抛出错误。开发环境是客户端渲染，浏览器提供完整DOM，因此不会触发问题。

解决方案 #

1. 隔离Leaflet到客户端渲染 #

• 用Nuxt的<ClientOnly>组件包裹所有Leaflet地图相关组件，确保只在浏览器环境加载：

  <ClientOnly>
    <YourLeafletMapComponent />
  </ClientOnly>
  

• 如果你使用@vue-leaflet/vue-leaflet，地图的初始化逻辑（比如自定义图层、标记）要放在onMounted钩子中，避免在服务端执行。

2. 修正Bootstrap插件配置 #

你的Bootstrap插件中错误地将整个bootstrap对象赋值给Tooltip和Carousel，应该单独导出对应的类：
修改plugins/useBootStrap.client.ts：

import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.provide('bootstrap', bootstrap)
  nuxtApp.provide('Tooltip', bootstrap.Tooltip)
  nuxtApp.provide('Carousel', bootstrap.Carousel)
})

同时，Bootstrap交互组件的初始化（比如激活Tooltip）也要放在onMounted钩子中，确保在客户端执行。

3. 优化Nuxt配置 #

• 为依赖DOM的库添加Vite SSR优化，避免服务端打包时出错：
  更新nuxt.config.js：

  export default defineNuxtConfig({
    target: 'static',
    css: ['~/assets/global.scss'],
    router: { base: '/' },
    vite: {
      ssr: {
        noExternal: ['leaflet', 'leaflet.markercluster', 'leaflet-fullscreen', 'leaflet-sidebar', 'leaflet.vectorgrid']
      }
    }
  })
  

• 升级Nuxt3到稳定版（当前使用的rc.11是测试版，存在不少SSG相关bug）。

4. 清理不必要依赖 #

移除package.json中的https依赖，Node.js内置该模块，无需单独安装。

验证 #

修改完成后重新执行npm run generate，若仍有报错，检查是否有其他组件在服务端尝试访问DOM对象，全部用<ClientOnly>包裹或移到客户端生命周期钩子中执行。

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