nuxt3中提示md5 is not defined

[imziwen]

nuxt: ^3.3.1
node: v16.13.0
npm: 8.1.0
老哥，我这里有这个问题，看看解决一下呗

[yue1123]

可以提供一下demo代码吗

[DanielSimgame]

可以提供一下demo代码吗

https://codesandbox.io/p/sandbox/zen-taussig-g2kqxb?file=%2Fapp.vue&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A7%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A7%7D%5D
看来是必然复现的
我的环境与楼主的类似
nuxt: ^3.3.1
node: 16.14.1
npm: 9.4.2

[yue1123]

了解了，我尝试定位一下问题

[Mdxin]

如果先全局引入SDK，则一切正常，而这会导致所有页面都引入SDK

# nuxt.config.ts

app: {
  head: {
    script: [
      {
        src: 'https://api.map.baidu.com/api?v=1.0&type=webgl&ak=!KEY!&callback=initializeBMap',
        tagPosition: 'bodyClose',
      },
    ],
  },
},

[Ricco8]

同nuxt3中出现该问题

[tuanzisama]

了解了，我尝试定位一下问题

经过排查，百度地图SDK中md5在此处尝试定义

md5 方法

 // Note: kA 经过混淆，为实际md5方法

if (typeof define === "function" && define.amd) {
    define(function() {
        return kA
    })
} else {
    if (typeof module === "object" && module.exports) {
        module.exports = kA
    } else {
        kB.md5 = kA
    }
}

但在Nuxt3的开发环境 (development)下，module则为：

{ hot: false }

此行为导致md5方法“错误”的定义到了module.exports，进而导致后续的报错。

如果预先定义module = undefined，可解决此 暂时 问题。

<template>
  <BMap @initd="onBMapInitdHandler">
    <BZoom />
  </BMap>
</template>

<script lang="ts" setup>
import { onBeforeMount } from 'vue'
import { BMap, BZoom } from 'vue3-baidu-map-gl'

let moduleObject;

onBeforeMount(() => {
  moduleObject = module;
  // eslint-disable-next-line no-global-assign
  (module as unknown) = undefined;
})

const onBMapInitdHandler = () => {
  // eslint-disable-next-line no-global-assign
  (module as unknown) = moduleObject;
}
</script>

应当存在更好的解决方案（或配置），建议等待后续完整的解决方案。

[XiaoshengSu]

临时解决方案是外围多加载一个MD5js，例如：仅供参考

export async function BMPGL(ak) {
  await loadScript('https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js')
  const src = `https://api.map.baidu.com/api?type=webgl&v=2.0&ak=${ak}&services=&callback=init`
  return new Promise((resolve, reject) => {
    window.init = function () {
      resolve(BMapGL)
    }
    const script = document.createElement('script')
    script.async = true
    script.src = src
    script.type = 'text/javascript'
    script.onerror = () => reject(new Error(`Failed to load script ${src}`))
    document.head.appendChild(script)
  })
}

async function loadScript(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = src
    script.type = 'text/javascript'
    script.onload = () => resolve()
    script.onerror = () => reject(new Error(`Failed to load script ${src}`))
    document.head.appendChild(script)
  })
}