Mapbox GL this.map.on('load') 事件在本地工作，但当我部署到 vercel 时不起作用

Question

我正在使用mapbox和next制作一个交互式地图，该地图在加载时设置某些图层的可见性。我还使用this.map.on('mousemove')设置了queryRenderedFeatures函数，如下所示:

export default {
props: {
map: {
type: Object,
required: true
}
},
data: () => ({
layerIds: ['Zip Code', 'Network'],
zone: 'Zip Code'
}),
mounted () {
this.map.on('load', () => { this.map.setLayoutProperty(this.layerIds[0], 'visibility', 'visible') })
this.map.on('load', () => { this.map.setLayoutProperty(this.layerIds[1], 'visibility', 'none') })
this.map.on('mousemove', (e) => {
if( this.zone == 'Zip Code'){
const features = this.map.queryRenderedFeatures(e.point)
...

现在，这些都是在我的map组件的子组件的挂载钩子中调用的，当我部署到本地服务器时，一切都像它应该的那样工作。然而，当我部署到vercel时，映射在加载时显示两个层，而不仅仅是第一个层，并返回控制台错误:

TypeError: this.map.on is not a function
at c.mounted (98d0728.js:1)
at ii (b366f77.js:2)
at vn (b366f77.js:2)
at Object.insert (b366f77.js:2)
at $ (b366f77.js:2)
at zn.__patch__ (b366f77.js:2)
at zn.t._update (b366f77.js:2)
at zn.o (b366f77.js:2)
at Tn.get (b366f77.js:2)
at new Tn (b366f77.js:2)
ai @ b366f77.js:2
manifest.js:1 Failed to load resource: the server responded with a status of 404 ()

我发现一些线程建议mapbox与服务器端渲染不兼容，但我不相信这是问题，甚至在这一点上是正确的。无论哪种方式，我尝试将target: 'static'行添加到我的next .config.js中，并将mapbox gl导入重构为mounted中的const，到目前为止都没有成功。有人知道是什么导致了这个错误吗?

Answer 1

我可以通过整合我的嵌套UI组件和它的父组件mapbox来消除这些错误，并根据next的"完全静态"呈现应用程序。指南。我相信有很多不同的方法来解决这个问题，其中一些可能允许我保留服务器端渲染，我想探索其他的，比如使用next客户端插件来实现这个目的，但这个解决方案对我来说是有效的，因为服务器端渲染在这里有点过度，静态渲染也更快。