[FIXED/SOLUTION PROBLEM] SPA application ( React,Vue,Angular etc.. ) news!

[smhylc]

Hello Dear Friends. Today, together with SPA technologies (react, vue, angular, etc..), we develop applications with ROS

By default, after downloading "ros2djs" with npm or a similar package manager, you will most likely get a "createjs" error. (This problem is present in all SPA applications)

If you are importing ros2djs mandatory packages in an html page with cdn link. It will work flawlessly. However, if you want to make a web application with a SPA technology, you will need to make a solution in this way.

PROBLEM SOLUTION STEPS

First, you download the required packages.

package managers may vary npm, yarn, nuget etc.. not problem.

npm install roslib 
npm install ros2djs

The "createjs" module should be included after all downloads are complete. "createjs" is required for graphics and map operations

BUT
When downloading, "createjs-module" package should be downloaded, not "createjs".

After the download of the packages is complete, we have one last step to fix the import error.

Go to ros2djs/src/Ros2D.js file and top line add

import * as createjs from "createjs-module

and

Go to ros2djs/build/ros2d.js file and top line add

import * as createjs from "createjs-module

After performing these operations, you can now start using the ROS2D library.

FINALLY

After doing these operations to the class you will import ros2d You need to add as follows.

import * as ROS2D from "ros2d

BONUS
If you don't want to deal with all these processes, I did it for you. You can start using it after downloading it directly from my repo address.

my repo : https://github.com/smhylc/ros2djs

npm -i https://github.com/smhylc/ros2djs

After downloading with the command, you can use the package without any problems.

Thank you.

• Library Version:All Version
• ROS Version: All ROS Version
• Platform / OS: All OS

[MatthijsBurgh]

Thank you.

With #92 I already tried to get this library more similar to ros3djs. Though the createjs module is still used in this one. I am not the biggest expert in JS. So hhen you do have the knowledge to drop the createjs module completely. Please assist.

[snorresovold]

I'm having some troubles with importing ros2d even with all the hoops you laid out, i also can't run npm -i https://github.com/smhylc/ros2djs

when importing ros2d and following your guide i get this error Cannot find module 'ros2d' or its corresponding type declarations.

[smhylc]

I'm having some troubles with importing ros2d even with all the hoops you laid out, i also can't run npm -i https://github.com/smhylc/ros2djs

when importing ros2d and following your guide i get this error Cannot find module 'ros2d' or its corresponding type declarations.

Hello, If you don't have to use ROS files as libraries, you can add ros libraries and dependencies to your application's index as a CDN, this way the problem will work directly.

However, if you want to have the libraries locally and not as a CDN, it should work fine after downloading them via npm as I explained.

If it doesn't work, you can download ros2djs via npm and then solve the problem by following the steps described above.

[snorresovold]

Yeah I did but it doesn't work, i have made sure i followed all the steps, I am using Typescript, could that be a problem?

[smhylc]

Can you tell me exactly what the error is?

[snorresovold]

TS2307: Cannot find module 'ros2d' or its corresponding type declarations.

[smhylc]

TS2307: Cannot find module 'ros2d' or its corresponding type declarations.

In external libraries, Angular can give such errors for unknown resources. Visual Code or whatever IDE you are using, intelisense should give you a warning. When you click on the warning point, the IDE will automatically generate a typescript file to solve this problem. But if you think it doesn't, you can do it manually.

Try : npm install --save @types/ros2d

next run npm install

[snorresovold]

I'm not using angular, I'm using react. npm install --save @types/ros2djs returns
`
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fros2djs - Not found
npm ERR! 404
npm ERR! 404 '@types/ros2djs@*' is not in this registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/snorresovold/.npm/_logs/2022-11-30T13_06_12_325Z-debug-0.log

[smhylc]

I'm not using angular, I'm using react. npm install --save @types/ros2djs returns ` npm ERR! code E404 npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fros2djs - Not found npm ERR! 404 npm ERR! 404 '@types/ros2djs@*' is not in this registry. npm ERR! 404 You should bug the author to publish it (or use the name yourself!) npm ERR! 404 npm ERR! 404 Note that you can also install from a npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in: npm ERR! /home/snorresovold/.npm/_logs/2022-11-30T13_06_12_325Z-debug-0.log

I have updated the comment. It should not give such a problem in React. You may be importing incorrectly when importing.

[snorresovold]

Import statement looks like this import * as ROS2D from 'ros2d'

returns this `ERROR in ./src/pages/Visualization.tsx 6:0-31

Module not found: Error: Can't resolve 'ros2d' in '/home/snorresovold/PFA/pfa-app-frontend/src/pages'`

[smhylc]

I am sure if you uninstall all ros library packages and then download my package, the problem will be solved automatically.

I downloaded it to check and it works fine.

[snorresovold]

After using your library i get the same ROS2D error, btw you should edit your post. It says npm -i https://github.com/smhylc/ros2djs
should say npm i https://github.com/smhylc/ros2djs

[MatthijsBurgh]

Using createjs-module is not a solution. It is not up-to-date with createjs, while it hasn't been updated in a long time. Might even be deprecated. Also this library is not that mature.

[snorresovold]

I have fixed my problems by importing ROS2D and createjs like this
const ROS2D = require("ros2d/build/ros2d.esm")
const createjs = require("createjs-module")

[XanderV2001]

When using the ros2d package in my svelte project I get the error [TypeError: Cannot read properties of undefined (reading 'Viewer')]

I import it like this import * as ROS2D from 'ros2d'. When I console.log() the ROS2D object I do see the viewer object.

Any idea what I'm doing wrong?

[Neoplanetz]

I uploaded ros2d js for ROS2 with SPA.
Thanks for @smhylc @RobotWebTools team.
you can use it to connect to ros2d for ROS2 with react.
I tested on ubuntu 22.04 ROS2 Humble now. It works. and you can build it.

• Usage -
  Github Link: https://github.com/Neoplanetz/ros2djs-ros2

1. you just install it to your SPA app.

• npm install https://github.com/Neoplanetz/ros2djs-ros2

2. import ROS2D

• import * as ROS2D from "ros2d";

3. Use ROS2D.

I will write README later, and upload example for ROS2 with SPA.

[pvg6]

@Neoplanetz Please help me how to visualize the 2d map and robot in web for ros2 humble