Nuxt3中使用shiki报错：Cannot read properties of undefined (reading 'VSCODE_TEXTMATE_DEBUG')

API 探路者

2026-7-20

解决Nuxt3中使用Shiki时出现的Cannot read properties of undefined (reading 'VSCODE_TEXTMATE_DEBUG')错误

这个错误本质是Shiki依赖的vscode-textmate库在Nuxt3的SSR环境下，无法正常访问Node.js的全局process对象导致的——即便手动添加环境变量，也可能因为Nuxt的服务端隔离机制没生效。以下是几个可行的解决方法：

配置Nuxt服务端全局变量与环境变量
在nuxt.config.ts中添加nitro配置，确保服务端能暴露process对象并注入环境变量：
```
export default defineNuxtConfig({
  nitro: {
    node: {
      globals: {
        process: true
      }
    }
  },
  runtimeConfig: {
    VSCODE_TEXTMATE_DEBUG: process.env.VSCODE_TEXTMATE_DEBUG || 'false'
  }
})
```
这样能让vscode-textmate在服务端渲染时正常读取到所需的环境变量标识。

组件内按需加载Shiki，适配SSR逻辑
避免在组件顶层直接导入Shiki，而是通过异步加载确保初始化时机正确：

<script setup>
const { data: highlightedCode } = useAsyncData('shiki-highlight', async () => {
  const { getHighlighter } = await import('shiki')
  const highlighter = await getHighlighter({
    theme: 'github-dark',
    langs: ['vue', 'javascript']
  })
  return highlighter.codeToHtml('<script setup>console.log("Hi")</script>', { lang: 'vue' })
})
</script>

<template>
  <div v-html="highlightedCode"></div>
</template>

用useAsyncData异步加载Shiki，既能避免SSR时的初始化冲突，也能缓存渲染结果提升性能。