How do we import stompjs in a browser? Or something like stompjs? - stompjs

Question

I am trying to follow this Spring tutorial on how to use websockets. I am using webpack to bundle my code and babel to convert it from ES6. I am trying to pull in sockjs with a normal import statement.
import SockJS from 'sockjs'
But when webpack runs, I get missing module errors,
ERROR in ./~/stompjs/lib/stomp-node.js
Module not found: Error: Cannot resolve module 'net' in /Users/name/Developer/cubs-stack-4/cubs-webapp/node_modules/stompjs/lib
# ./~/stompjs/lib/stomp-node.js 14:8-22
ERROR in ./~/websocket/package.json
Module parse failed: /Users/name/Developer/cubs-stack-4/cubs-webapp/node_modules/websocket/package.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
| "_args": [
| [
| "websocket#latest",
# ./~/websocket/lib/version.js 1:17-43
mainly because it is expecting to be run on Node.
I have 2 questions.
First, how do I get stompjs into my browser side code using an import/require statement?
Second, how come in the tutorial, they can drop stompjs in the HEAD and it doesn't blow up in the browser, but it does when I run the "same" code through webpack?

Answer 1

It seems that stompjs library referenced in Spring's documentation is no longer developed, but there is fork that is maintained and with instructions on how to add it to your project available here: https://github.com/stomp-js/stomp-websocket
Here are the steps that I used to resolve this issue and to get things working in a React app with websockets on Spring backend:
# Add sockjs and stompjs dependencies
npm install sockjs-client --save
npm install #stomp/stompjs --save
Then import it into your app:
import SockJS from "sockjs-client"
import Stomp from "#stomp/stompjs"
You should now be able to use the frontend code from the Spring's documentation successfully.

Answer 2

installing 'net' dependency solved my issue
npm i sockjs-client --save
npm i stompjs --save
npm i net
and import like this
import * as SockJS from 'sockjs-client';
import * as Stomp from 'stompjs';

Answer 3

You have to import "sockjs-client": "^1.0.3" in your package.json.
Then you can import it with
import SockJS from 'sockjs-client'
My webpack.config.js contains the library 'sockjs-client'.
Additionally I added the following conf, in order to ignore missing net module.
node: {
net: 'empty',
tls: 'empty',
dns: 'empty'
}
Source: https://github.com/hapijs/joi/issues/665#issuecomment-113713020

Answer 4

In ionic 6 Angular 12
Install
npm i --save sockjs-client stompjs net
Then
npm i --save-dev #types/sockjs-client #types.stompjs
Import using
import * as SockJS from 'sockjs-client';
import * as Stomp from 'stompjs';
To solve the issue with 'global' I had to add the following to index.html
<script type="application/javascript"> var global = window; </script>

Answer 5

To use stompjs in browser, just open file your_path/node_modules/stompjs/index.js, comment it like this:
var Stomp = require('./lib/stomp.js');
// var StompNode = require('./lib/stomp-node.js');
module.exports = Stomp.Stomp;
// module.exports.overTCP = StompNode.overTCP;
// module.exports.overWS = StompNode.overWS;