如何在Nuxt 3中引入npm包中的Vue组件simple-code-editor？

为啥会出这问题 #

highlight.js更新后改成纯ES模块导出了，不再提供default导出，但simple-code-editor内部还在用默认导入的方式，结果Nuxt解析的时候就出现了导出相关的错误。

修复步骤 #

1. 修改组件注册模块代码 #

别在register-components.ts里手动导入hljs了，调整配置给highlight.js加个别名适配它的导出规则：

修改modules/register-components.ts：

import { addComponent, defineNuxtModule, addAlias } from '@nuxt/kit'

export default defineNuxtModule({
  setup() {
    // 适配highlight.js的ES模块导出
    addAlias({
      find: 'highlight.js',
      replacement: 'highlight.js/lib/core.js'
    })

    addComponent({
      name: 'CodeEditor',
      export: 'CodeEditor',
      filePath: 'simple-code-editor'
    })
  }
})

2. 配置Nuxt转译相关依赖（若上述方法无效则添加） #

如果改完还是报错，就在nuxt.config.ts里把这两个依赖加入转译列表，确保Nuxt能处理模块兼容问题：

export default defineNuxtConfig({
  build: {
    transpile: ['simple-code-editor', 'highlight.js']
  }
})

3. 手动封装highlight.js（终极适配方案） #

要是前面的方法都不好使，自己建个封装文件，给simple-code-editor提供它需要的导出格式：

在项目中创建plugins/highlight.js文件，内容如下：

import * as hljs from 'highlight.js'

// 模拟default导出，适配simple-code-editor的导入逻辑
export default hljs
export const HighlightJS = hljs

然后在nuxt.config.ts里添加别名，让simple-code-editor加载咱们封装的版本：

export default defineNuxtConfig({
  alias: {
    'highlight.js': './plugins/highlight.js'
  }
})

验证 #

重启Nuxt项目，尝试使用<CodeEditor>组件，应该就不会再出现导出相关的错误了。

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