Salesforce Asked by javanoob on January 28, 2021
I am trying to use socket.io library with LWC OSS and followed the below steps:
Created LWC OSS app using the command npx create-lwc-app my-app
Installed socket.io library using the command npm install socket.io
Updated scripts/server.js as below:
// Simple Express server setup to serve the build output
const compression = require('compression');
const helmet = require('helmet');
const express = require('express');
const path = require('path');
const server = require('http').createServer(express);
const io = require('socket.io')(server);
const app = express();
app.use(helmet());
app.use(compression());
const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 3001;
const DIST_DIR = './dist';
io.on('connection', (client) => {
console.log(`client connected`);
client.on('disconnect', () => {
console.log(`Client disconnected`);
});
});
app.use(express.static(DIST_DIR));
app.use('*', (req, res) => {
res.sendFile(path.resolve(DIST_DIR, 'index.html'));
});
server.listen(3001, () => {
console.log('listening on port 3001');
});
Updated src/client/modules/my/app/app.js as below:
import { LightningElement } from 'lwc';
import io from 'socket.io';
export default class App extends LightningElement {
connectedCallback() {
//eslint-disable-next-line
var socket = io();
}
}
Ran the command npm run watch
and get the below error:
ERROR in ./node_modules/socket.io/dist/index.js
Module not found: Error: Can't resolve 'fs' in '/home/John/workspace/my-app/ node_modules/socket.io/dist'
@ ./node_modules/socket.io/dist/index.js 27:13-26
@ ./src/client/modules/my/app/app.js
@ ./src/client/index.js
@ multi ./node_modules/error-overlay-webpack-plugin/lib/entry-basic.js ./node_modules/ error-overlay-webpack-plugin/lib/entry-devserver.js? ./src/client/index.js
(node:25805) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, stat '/initrd.img'
(node:25805) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:25805) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:25805) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, stat '/initrd.img.old'
(node:25805) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:25805) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, stat '/vmlinuz'
(node:25805) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)
(node:25805) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, stat '/vmlinuz.old'
(node:25805) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 4)
When I launch url http://localhost:3001, it shows the below error:
./node_modules/socket.io/dist/index.js
Module not found: Can't resolve 'fs' in '/home/John/workspace/my-app/ node_modules/socket.io/dist'
Quick google search shows that this is a common known issue with webpack bundling and there are some recommended solutions like in this Module not found: Error: Can’t resolve ‘fs’ Using Webpack but I am confused as where to make change like this.
I am guessing lwc-services.config.js need to be updated to resolve this error but I am not sure as what that change is. Can someone help me here?
Looks like the module that you are using is for the server-side and not the client-side socket.io lib you need. Use the client site script instead.
You can just use the <script>
tag in your HTML index.html
and import the socket.io js file for the client site
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io('http://localhost');
</script>
You can use the server-side module that you have in your express server.
Answered by Mohith Shrivastava on January 28, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP