在Create React App中配置nav2d.js解决模块未找到报错

我明白你在Create React App里集成nav2d时遇到了模块找不到的错误——这类问题大多源于ROS相关前端库（尤其是nav2d）的模块设计和React的ES模块环境不兼容。下面是一步步的解决方案：

1. 先确保依赖安装完整且正确 #

先彻底卸载并重新安装所有相关依赖，避免缓存或安装不完整的问题：

npm uninstall roslib ros2d nav2d createjs-easeljs
npm install roslib ros2d nav2d createjs-easeljs --save

安装完成后，检查package.json的dependencies字段，确认这四个包都已正确添加。

2. 调整模块引入方式（关键步骤） #

很多ROS前端库是基于全局变量设计的，而非标准ES模块。所以需要先把依赖挂载到全局window对象上，再引入nav2d：

import React, { Component, createRef } from 'react';
import ROSLIB from 'roslib';
import ROS2D from 'ros2d';
import createjs from 'createjs-easeljs';

// 先将依赖挂载到全局，满足nav2d对全局变量的依赖
window.ROSLIB = ROSLIB;
window.ROS2D = ROS2D;
window.createjs = createjs;

// 再引入nav2d
const NAV2D = require('nav2d');

export default class TestMap extends Component {
  mapRef = createRef();

  componentDidMount() {
    // 必须等DOM元素挂载完成后再初始化nav2d
    if (!this.mapRef.current) return;

    // 初始化ROS连接（替换成你的rosbridge实际地址）
    const ros = new ROSLIB.Ros({
      url: 'ws://localhost:9090'
    });

    // 初始化NavigationClient
    const navClient = new NAV2D.NavigationClient({
      ros: ros,
      rootObject: this.mapRef.current,
      // 可按需添加其他配置，比如地图主题、默认缩放级别等
    });
  }

  render() {
    return (
      <div 
        ref={this.mapRef}
        style={{ width: '800px', height: '600px', border: '1px solid #ccc' }}
      ></div>
    );
  }
}

3. 处理nav2d npm包的潜在问题 #

如果上面的方法还是报错，大概率是npm上的nav2d包本身模块导出存在问题（这个包的维护不算活跃）。你可以尝试以下两种方案：

方案A：手动修改nav2d源码 #

1. 从ROS官方的rosbridge-suite项目中下载nav2d.js文件，放到你的项目src/assets/js目录下。
2. 修改nav2d.js开头的依赖引入代码，把：

   var ROSLIB = require('roslib');
   var ROS2D = require('ros2d');
   

   替换成：

   import ROSLIB from 'roslib';
   import ROS2D from 'ros2d';
   

3. 在组件里直接导入修改后的文件：

   import NAV2D from './assets/js/nav2d';
   

方案B：用CDN引入（备用方案） #

如果npm包的问题实在无法解决，可在public/index.html里通过CDN引入所有依赖，绕开模块系统的兼容问题：

<script src="https://cdn.jsdelivr.net/npm/roslib@1.4.0/build/roslib.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ros2d@0.1.1/build/ros2d.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/nav2d@0.1.0/build/nav2d.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/createjs-easeljs@1.0.2/lib/easeljs.min.js"></script>

之后在组件里直接使用全局变量ROSLIB、ROS2D、NAV2D、createjs即可，无需再用import/require。

4. 额外注意事项 #

• 确保你的rosbridge服务器已经启动，且组件里配置的url和服务器地址一致。
• 初始化nav2d的代码必须放在componentDidMount生命周期里，确保DOM元素已存在。
• 如果遇到createjs相关错误，检查是否已将createjs正确挂载到全局window对象上。

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