Importing roslib in Vite application crashes in production as 'this' is undefined

[olehakon]

Description
I'm using Vite to build a React SPA, hosted through a Node Express server.

Importing roslib in dev mode works, but after building the application I have an error in the browser saying Cannot read properties of undefined (reading 'ROSLIB').

The error seems to come from the RosLib.js file, specifically this code:

var ROSLIB = this.ROSLIB || {  // <-- Error here
   REVISION : '1.4.1'
};

It seems that 'this' is undefined.

Am I missing something here or is this module not compatible with Vite?

• Library Version: 1.4.1
• ROS Version: ?
• Platform / OS: OSX

Steps To Reproduce

1. Create a new Vite project
2. Install roslib
3. import roslib, e.g. import * as ROS from "roslib"
4. Build the application for production and run it

Expected Behavior
Application running as expected

Actual Behavior
Application crashes with the follwing error:

Uncaught TypeError: Cannot read properties of undefined (reading 'ROSLIB')

[MatthijsBurgh]

You probably need to build the library from source. As the current HEAD of the library is refactored a lot compared to the latest release. Vite is now used to build the library.

[olehakon]

You probably need to build the library from source. As the current HEAD of the library is refactored a lot compared to the latest release. Vite is now used to build the library.

Ahh, ok. Are there any step-by-step guides how to do this the correct way?
And, are there any plans for a next release with the current refactored codebase?

[MatthijsBurgh]

That depends on the package manager you are using. It probably has a guide to add git dependencies.

@sea-bass @EzraBrooks can probably tell you more about the release plans.

[olehakon]

That depends on the package manager you are using. It probably has a guide to add git dependencies.

@sea-bass @EzraBrooks can probably tell you more about the release plans.

Ok. I'm using yarn and it seems that I can install it directly from github. But when I try that I have an error upon build:

src/urdf/UrdfModel.js:35:7 - error TS2322: Type 'Element | null' is not assignable to type 'Element | null | undefined'.
  Type 'Element' is missing the following properties from type 'Element': classList, className, clientHeight, clientLeft, and 102 more.

35       xmlDoc = parser.parseFromString(string, MIME_TYPE.XML_TEXT).documentElement;
         ~~~~~~


Found 1 error in src/urdf/UrdfModel.js:35

I'm not familiar with this library so if anyone has a quick fix to this I would appreciate it!

[EzraBrooks]

Hmm, it looks like your project's typescript configuration is failing to compile roslibjs. If you'd like to open a PR to fix this type issue, I would be happy to review it. I'm using roslibjs with no issue, though I built my own pre-release package so I didn't need to compile it with my local tsc.

@MatthijsBurgh @sea-bass I feel like we're getting to a point where we need to just cut 2.0 even though we don't have ROS 2 integration tests - it's been working with ROS 2 for me for over a year.

[MatthijsBurgh]

Let's go for it

[sea-bass]

Works for me as well. Seems like nobody really has the bandwidth to port these tests. Maybe worth a post on ROS discourse or something?

[olehakon]

@sea-bass Any update on this?

We are not currently planning to migrate to ROS2, so I'm concerned that if I update roslibjs to the coming release I will not be able to accept incoming data from devices running ROS1. Is this correct or is this backward compatible?

We are also using ros3d. Will we be able to use that after upgrading?

[pjreed]

Just chiming in that I just ran into this problem myself on an existing project. I can build everything successfully with vite 5.4.14, but after upgrading to 6.2.0, I get this same error when trying to load a build made in production mode. The problem goes away with downgrading vite back to 5.4.14.

[EzraBrooks]

I'm on Vite 5 as well, so maybe that is indeed related.

[EzraBrooks]

Also, related to earlier discussion about releasing v2, #746 is tracking that work