Nuxt3.12中使用AOS与Lodash遇导出错误的解决咨询

问题描述 #

通过pnpm安装nuxt-aos和nuxt-lodash后，在nuxt.config.ts的modules中配置如下：

modules: [
  "nuxt-aos",
  "nuxt-lodash"
],

但在标签上添加data-aos属性后，控制台出现错误：

"SyntaxError: The requested module '/_nuxt/node_modules/.pnpm/lodash.debounce@4.0.8/node_modules/lodash.debounce/index.js?v=443b1030' does not provide an export named 'default'"

解决思路 #

• 调整模块加载顺序：将nuxt-lodash放在nuxt-aos之前加载，让lodash的导出规则先被初始化，避免aos调用时出现导出不匹配：

  modules: [
    "nuxt-lodash",
    "nuxt-aos"
  ],
  

• 启用nuxt-lodash完整包模式：在nuxt.config.ts中配置nuxt-lodash使用完整lodash包，而非拆分的子模块，避免导出格式差异：

  modules: [
    "nuxt-aos",
    "nuxt-lodash"
  ],
  lodash: {
    full: true
  }
  

• 自定义AOS插件修复导入逻辑：如果上述方法无效，手动替换AOS内部的debounce导入：

  1. 在plugins目录创建aos.client.ts：

     import AOS from 'aos'
     import * as debounce from 'lodash.debounce'
     AOS.utils.debounce = debounce.default || debounce
     import 'aos/dist/aos.css'
     
     export default defineNuxtPlugin(() => {
       if (process.client) {
         AOS.init()
       }
     })
     

  2. 修改nuxt.config.ts，移除nuxt-aos模块，仅加载自定义插件：

     modules: [
       "nuxt-lodash"
     ],
     plugins: [
       '~/plugins/aos.client.ts'
     ]
     

• 检查依赖版本兼容性：尝试升级或降级依赖包，确保nuxt-aos、nuxt-lodash与当前Nuxt版本匹配：

  pnpm update nuxt-aos nuxt-lodash
  

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