2

I am trying to use socket.io library with LWC OSS and followed the below steps:

  1. Created LWC OSS app using the command npx create-lwc-app my-app

  2. Installed socket.io library using the command npm install socket.io

  3. 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');
     });
    
  4. 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();
         }
     }
    
  5. 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)
    
  6. 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?

2
  • in scripts/server.js can you safely add and test the following? Add const fs = require('fs'); beneath const io = require('socket.io')(server); – Peter Noges Jan 13 at 6:47
  • @PeterNoges Yes, I am able to access fs library without any errors in scripts/server.js. It is showing this error only when I add socket.io reference in src/client/modules/my/app/app.js – javanoob Jan 13 at 16:30
3

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.

2
  • 1
    nice one Mohith, good to know – Peter Noges Jan 13 at 17:12
  • 1
    Thanks Mohith for walking through with me on this. Yes, I used server side library, instead of client side library. :facepalm – javanoob Jan 14 at 17:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.