How do we import stompjs in a browser? Or something like 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?

score 16 · Answer 1 · answered Jul 22 '17 at 16:18

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.

Mashrabbek Akbarov · Answer 2 · 2019-04-05T05:38:36.133

15

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';

edited Apr 05 '19 at 05:38

answered Apr 05 '19 at 05:33

Mashrabbek Akbarov

296
3
12

Synox · Answer 3 · 2016-04-19T05:20:15.063

2

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

edited Apr 19 '16 at 05:20

answered Apr 18 '16 at 09:42

Synox

1,148
2
17
38

score 0 · Answer 4 · answered Jun 06 '21 at 18:42

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>

score -2 · Answer 5 · answered Jan 19 '17 at 07:59

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;

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

5 Answers5