@here/maps-api-for-javascript在Next.js中报错Unexpected token 'export'如何解决

云原生阿岚

2026-9-30

问题原因

该报错的核心是@here/maps-api-for-javascript发布的是纯ES模块格式代码，而Next.js默认不会对node_modules下的第三方包做ES语法转译，服务端渲染阶段Node.js直接加载未转译的ES模块时，就会识别不了export语法抛出错误。

解决方案

方案1：配置Next.js转译指定第三方包

Next.js 13+ 提供了transpilePackages配置项，可以指定需要转译的node_modules包：

打开项目根目录的next.config.js文件，添加配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@here/maps-api-for-javascript'],
  // 其他原有配置保留
}

module.exports = nextConfig

重启开发服务即可生效。

方案2：仅在客户端侧加载该包

HERE Maps API是纯浏览器端运行的库，不需要参与服务端渲染，你可以选择两种客户端加载方式避开服务端解析报错：

方式A：动态导入组件禁用SSR

import dynamic from 'next/dynamic'

// 单独把地图逻辑封装为组件，动态引入时关闭SSR
const MapComponent = dynamic(() => import('./components/Map'), {
  ssr: false,
  loading: () => <p>地图加载中</p>
})

// 页面中直接使用<MapComponent />即可

方式B：useEffect中异步导入

import { useEffect } from 'react'

export default function MapPage() {
  useEffect(() => {
    const loadMap = async () => {
      const H = (await import('@here/maps-api-for-javascript')).default
      // 此处写初始化地图的逻辑，仅在客户端执行
    }
    loadMap()
  }, [])

  return <div id="map-container" style={{ width: '100%', height: '600px' }}></div>
}