Issue with roslibjs and Vite

This issue has been tracked since 2022-05-19.

I am using roslibjs with a project that uses Vite as the build system and am running into an issue when running the project in development.

  • Library Version: 1.3.0
  • ROS Version: Galactic
  • Platform / OS: Ubuntu 20.04
  • Vite Version: 2.9.9

Steps To Reproduce
Minimum reproducible project here: https://github.com/kavidey/vite-sample-roslib
Run npm run dev to get the error, or npm run build then npm run preview to see the project working properly.

Expected Behavior
In both dev and preview mode, importing roslibjs should work without any errors.

Actual Behavior
When running the code in dev mode, I get the error: ReferenceError: Can't find variable: Buffer.

That error traces back to core/Ros.js requiring ws. I think that the ws shim may not be working correctly when vite is running in dev mode and roslibjs thinks that its running in node so it tries to require ws, though I'm not sure.

MatthijsBurgh wrote this answer on 2022-05-20

I have really no clue. I also have to say this is a bit out of the support scope. I have to say I have never experienced any issue with webpack-dev-server.

When you are able to provide a solution that requires to be implemented in the library, I am open to that. But I am not able to help you finding that solution.

desstiony wrote this answer on 2022-06-10

Just replace import 'roslib/build/roslib' with import 'roslib/build/roslib'

MatthijsBurgh wrote this answer on 2022-06-10

@desstiony you suggest to replace it with the same....

desstiony wrote this answer on 2022-06-10

Sorry, I made a typo. you should replace "import * as ROSLIB from 'roslib'" with 'roslib/build/roslib' in main.js file.

MatthijsBurgh wrote this answer on 2022-06-10

So you mean replace import * as ROSLIB from 'roslib' with import * as ROSLIB from 'roslib/builld/roslib'?

desstiony wrote this answer on 2022-06-10

Just import 'roslib/build/roslib', you can try it.

MatthijsBurgh wrote this answer on 2022-06-10

I am not using Vite. It wasn't clear to me. So I thought it might not be clear to other people.

desstiony wrote this answer on 2022-06-10

I have tried it in the codespace of this repository hope it can help you. @kavidey

kavidey wrote this answer on 2022-06-10

Thank you @desstiony. This is a great fix for now!

Because we're importing the fully compiled browser version, it creates a global window.ROSLIB object instead of putting it into a local variable. This means we don't get tree shaking or quite as clean syntax (SSR also for those code segments also has to be disabled because that build of ROSLIB cannot run on the server)

I added a shim file to simplify the import syntax, so now it looks like import ROSLIB from './roslib.shim'; and we don't need to look at the global variable. Changing the file extension of the shim to .ts also gives typescript support.

I think if possible it would be great to try and find a solution that doesn't require using the precompiled version of roslib, but this works great for now!

Interpause wrote this answer on 2022-07-23

The issue with the import shim failing is likely due to vitejs/vite#7576, which is waiting on PR vitejs/vite#8709.

A workaround is possible by using Vite's resolve.alias to mimick the shims below:

roslibjs/package.json

Lines 8 to 14 in 7aac4c5

"browser": {
"./src/RosLibNode.js": "./src/RosLib.js",
"canvas": "./src/util/shim/canvas.js",
"ws": "./src/util/shim/WebSocket.js",
"@xmldom/xmldom": "./src/util/shim/@xmldom/xmldom.js",
"./src/util/decompressPng.js": "./src/util/shim/decompressPng.js"
},

In vite.config.js:

{
  // ...
  resolve: {
    alias: {
      './src/RosLibNode.js': './src/RosLib.js',
      canvas: './canvas',
      ws: '../util/shim/WebSocket',
      '@xmldom/xmldom': '../util/shim/@xmldom/xmldom',
      '../util/decompressPng': '../util/shim/decompressPng',
    }
  }
}

Note the above could have undesireable side effects if you so happen to also import those paths.

Alternatively, why not import the shims directly then use the below trick to either import the NodeJS dependencies or browser dependencies?

module.exports = typeof window !== 'undefined' ? window.WebSocket : WebSocket;

More Details About Repo
Owner Name RobotWebTools
Repo Name roslibjs
Full Name RobotWebTools/roslibjs
Language JavaScript
Created Date 2013-03-15
Updated Date 2022-11-22
Star Count 549
Watcher Count 54
Fork Count 340
Issue Count 66

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date