为什么Openlayers模块仅支持客户端渲染？Next.js导入报错原因解析

• 模块语法兼容问题
  Openlayers 官方发布的 npm 包采用纯 ESM 规范编写，没有额外提供 CommonJS 格式的兼容产物。Next.js 在服务端渲染阶段默认使用 Node.js 的 CommonJS 模块系统加载依赖，Node.js 处理未明确声明 ESM 格式的第三方依赖时，会将代码中的 export 等 ESM 专属语法识别为非法字符，直接抛出 Unexpected token 'export' 报错。
• 强依赖浏览器专属 API
  Openlayers 核心能力依赖 Canvas 渲染、DOM 操作、window/document 全局对象等浏览器专属环境能力，Node.js 服务端运行时不存在上述 API。Openlayers 从设计之初就只面向浏览器端场景开发，没有做服务端运行的降级兼容处理，就算解决了模块语法问题，在服务端运行时也会直接触发变量未定义的报错。
• 你当前采用的关闭 SSR 的方案是符合设计逻辑的标准解法：
  Next.js 13+ App Router 下给使用 Openlayers 的组件添加 'use client' 指令，或者 Pages Router 下使用 next/dynamic 配置 ssr: false 引入组件后，组件及其依赖只会在客户端环境加载运行，既适配了 ESM 语法，也能拿到完整的浏览器 API，自然不会触发报错。

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