Node.js及Vite项目中@maplibre模块导入失败问题求助

一、解决全局安装模块找不到的问题 #

ES模块（type: module）的Node.js项目默认不会自动识别全局node_modules路径，这是触发ERR_MODULE_NOT_FOUND的核心原因。不要依赖全局安装，改用局部安装：

• 执行命令：

  npm install @maplibre/maplibre-gl-directions
  

• 安装完成后，在index.js中按正常方式导入即可：

  import MaplibreDirections from '@maplibre/maplibre-gl-directions';
  

二、解决Vite项目的模块解析问题 #

1. 确保Vite为局部安装 #

全局安装的Vite无法被项目的ES模块正确识别，导致找不到Vite包。在项目根目录执行：

npm install vite --save-dev

之后用npx vite启动开发服务，不要直接全局调用vite命令。

2. 确认@maplibre/maplibre-gl-directions的安装与导入 #

• 必须在Vite项目中局部安装该模块（命令同上）
• 前端代码导入时，别漏了样式文件，确保路径正确：

  import '@maplibre/maplibre-gl-directions/dist/maplibre-gl-directions.css';
  import MaplibreDirections from '@maplibre/maplibre-gl-directions';
  

3. 避免直接打开HTML文件 #

Vite项目必须通过npx vite启动的开发服务器访问（默认地址http://localhost:5173），直接打开本地HTML文件会因为跨域和模块解析规则限制，导致模块找不到。

三、额外排查点 #

• 检查项目根目录package.json中是否正确设置了"type": "module"
• 如果该模块为CommonJS格式，Vite默认会自动处理，若仍有解析问题，可在vite.config.js中添加优化配置：

  export default {
    optimizeDeps: {
      include: ['@maplibre/maplibre-gl-directions']
    }
  }
  

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