Reputation: 25
I am following this React and Spring Data Rest tutorial and am currently at Part 4: https://spring.io/guides/tutorials/react-and-spring-data-rest
I have completed all the steps for Part 4. However, when attempting to run the project I am getting errors. Running ./mvnw clean install
I get the following errors:
[INFO] ERROR in ./src/main/js/websocket-listener.js
[INFO] Module not found: Error: Can't resolve 'sockjs-client' in '.../src/main/js'
[INFO] @ ./src/main/js/websocket-listener.js 3:13-37
[INFO] @ ./src/main/js/app.js
[INFO]
[INFO] ERROR in ./src/main/js/websocket-listener.js
[INFO] Module not found: Error: Can't resolve 'stompjs' in '.../src/main/js'
[INFO] @ ./src/main/js/websocket-listener.js 4:0-18
[INFO] @ ./src/main/js/app.js
The websocket-listener.js file I am using is as follows:
// websocket-listener.js
'use strict';
const SockJS = require('sockjs-client');
require('stompjs');
function register(registrations) {
const socket = SockJS('/payroll');
const stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
registrations.forEach(function (registration) {
stompClient.subscribe(registration.route, registration.callback);
});
});
}
module.exports.register = register;
I have attempted to add the resolve: { alias: { 'stompjs': ... } }
as suggested. However, the stompjs
error still appears. The current webpack.config.js file I am using is:
// webpack.config.js
var path = require('path');
module.exports = {
entry: './src/main/js/app.js',
// change devtool from 'sourcemap' to 'eval-source-map' for webpack5 compliance
devtool: 'eval-source-map',
cache: true,
mode: 'development',
resolve: {
alias: {
'stompjs': path.resolve(__dirname, 'node_modules/stompjs/lib/stomp.js'),
},
},
output: {
path: __dirname,
filename: './src/main/resources/static/built/bundle.js'
},
module: {
rules: [
{
test: path.join(__dirname, '.'),
exclude: /(node_modules)/,
use: [{
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env", "@babel/preset-react"]
}
}]
}
]
}
};
In my package.json I have added sockjs-client
and stompjs
using the following dependencies and dev dependencies:
{
...
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rest": "^2.0.0",
"sockjs-client": "^1.6.1",
"stompjs": "^2.3.3"
},
...
"devDependencies": {
"@babel/core": "^7.23.9",
"@babel/preset-env": "^7.23.9",
"@babel/preset-react": "^7.23.3",
"babel-loader": "^9.1.3",
"webpack": "^5.90.3",
"webpack-cli": "^5.1.4"
}
}
I am not sure how to proceed with resolving these errors. Guidance on resolving these errors would be greatly appreciated.
Upvotes: 0
Views: 302