Experiencing a websocket issue despite not incorporating websocket functionality in the code

Whenever I attempt to run npm run dev, I encounter a websocket error. I'm part of a team with WSL and Mac users, and the repository runs smoothly for everyone else except me. I'm puzzled as to why I'm the only one facing this issue while trying to run our application.

Facing Websocket Error during npm run dev

This is the webpack configuration file we are using.

var path = require("path");
var HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname, "build"),
        publicPath: '/build',
        filename: "index_bundle.js"
    },
    mode: process.env.NODE_ENV,
    module: {
        rules: [
          {
            test: /\.tsx?/,
            use: 'ts-loader',
            exclude: /node_modules/,
          },
          {
            test: /\.jsx?/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env', '@babel/preset-react'],
                plugins: ["@babel/plugin-syntax-jsx"]
              },
            },
            exclude: /npm_modules/
          },
          {
            test: /\.s?css/,
            use: ["style-loader", "css-loader", "sass-loader"],
          },
          {
            test: /\.(png|jpg|gif|svg)$/,
            use: [
              {
                loader: "file-loader",
                options: {
                  outputPath: '/images'
                }
              }
            ]
          },
        ]
    },
    resolve: {
        extensions: [".js", ".jsx", ".tsx", ".ts"],
    },
    devServer: {
      static: {
        directory: path.join(__dirname, '/src'),
        },
      proxy: {
        '/': 'http://localhost:3000'
      },
      compress: true,
      port: 8080,
  },
};

Answer №1

Successfully found a solution that worked for me. By changing the port from 8080 to 9000 in our development server, the issue was resolved. It's interesting that this simple change fixed the problem. Interestingly, I also discovered this same solution recommended in the snowpack.dev documentation. More details here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing the ng-required directive with the model's value in AngularJS

I need to validate a form field for both null and its value. Can anyone suggest how I can achieve this without writing a function on the controller? <form name="frm"> <input type="text" ng-model="myModel" ng-required="myModel != '' || m ...

Is the javascript function I created not recognized as "a function"?

A small .js file containing 3 functions for easy in-site cookie management was created. Below is the source code: // Create Cookie function Bake(name,value) { var oDate = new Date(); oDate.setYear(oDate.getFullYear()+1); var oCookie = encodeURIComponent(n ...

The AutoComplete feature of MaterialUI Component fails to function properly even when there is available data

I am facing an issue with my component as it is not displaying the autosuggestions correctly. Despite having data available and passing it to the component through the suggestions prop while utilizing the Material UI AutoComplete component feature here, I ...

Transferring and displaying messages between PHP scripts

On my page (index.php), I have a simple layout consisting of two DIVs. The left side (#leftDIV) contains a form and another DIV (#messages) for displaying error messages. On the right side, there is another DIV (#mapAJAX) which houses a PHP script responsi ...

A guide on dynamically loading images based on specified conditions in AngularJS

I am trying to display different images based on a value. If the value is greater than 3.50, image1 should be shown; if it is equal to or less than 3.50, image2 should be shown. I have attempted to write this code but I cannot find where I made a mistake. ...

Storing Firebase credentials securely in Vue.js applications after deployment with environment variables (env_var)

I've been attempting to deploy my firebase&vue application, but I've encountered issues with adding firebase credentials to the environment variables. Here's the structure within vue.js: config ---- key.js ---- keys_dev.js ---- key ...

What happens when you click on paper-tabs in a polymer?

Struggling to get click events to fire on <paper-tabs> and <paper-tab>. Interestingly, when manually adding event listeners in Chrome's developer tools, it works fine. But the same code doesn't seem to work in my application: // app. ...

What is the best way to incorporate auto refresh in a client-side application using vue.js?

Disclaimer: I have separated my client application (Vue.js) from the server side (DjangoRest). I am utilizing JWT for validating each request sent from the client to the server. Here is how it works - The client forwards user credentials to the server, an ...

Issues with displaying the grandparent of the nearest element using jQuery

I have some HTML below (generated using CakePHP): I am attempting to display the grandparent element of the closest element that was clicked: $('.what_is_the_quote_for').closest('.form-group').hide(); $('.visit_status').cha ...

Activate inline javascript within LESS styling

I am interested in incorporating inline JavaScript into my less files, but I received the following notification: Inline JavaScript is not enabled. Have you configured it in your settings? What steps can I take to enable this feature? ...

What is the best way to store user inputs in a text file using ReactJS?

I have a contact form with three input fields and I would like to save the input values into a text file when users click on a button. How can I achieve this? Can you provide an example? Here is my code: import React, { } from 'react'; import l ...

The structure of NodeJS Express API calls revolves around handling asynchronous events

Currently, I am working on a hobby project using NodeJS and Express, but I am finding it challenging to manage asynchronous calls. There is a bug that I would like the community's help in resolving. I have set up an Express layout where I send post r ...

What is the best approach for filtering a nested array in this scenario?

Here is the response I am getting: let m = [ { name: 'Summary', subListExpanded: false, subList: [ ] }, { name: 'Upload', subListExpanded: false, subList: [ ...

recording the results of a Node.js program in PHP using exec

I'm attempting to retrieve the output from my node.js script using PHP exec wrapped within an ajax call. I am able to make the call and receive some feedback, but I can't seem to capture the console.log output in the variable. This is how I exec ...

How can I use Angular's $filter to select a specific property

Is there a convenient method in Angular to utilize the $filter service for retrieving an array containing only a specific property from an array of objects? var contacts = [ { name: 'John', id: 42 }, { name: 'M ...

Issues arise when attempting to enforce type-safety in TypeScript while using the JSON.parse

Is it possible that type-safety is compromised in TypeScript when dealing with JSON parsing? I should be triggering an error, but I'm not: interface Person { name: string } const person: Person = somePossibleFalsey ? JSON.parse(db.person) : undefi ...

Issue with Firefox causing Bootstrap form to appear incorrectly

I recently created a customized form using Bootstrap, but unfortunately, I'm encountering an issue with Firefox. Despite functioning perfectly on other browsers, the radio buttons are being pushed off the edge of the page and aren't displaying pr ...

Updating the values of parent components in Vue.js 3 has been discovered to not function properly with composite API

Here is a Vue component I have created using PrimeVue: <template lang="pug"> Dialog(:visible="dShow" :modal="true" :draggable="false" header="My Dialog" :style="{ width: '50vw' }" ...

Leveraging Async/Await to track error counts across three distinct loops, each invoking an asynchronous function in every iteration

While I have experience with Callbacks, Async/Await and Promises are new concepts to me. In my node.JS server project, I am faced with the challenge of counting errors generated by thousands of asynchronous calls from three different async functions. My g ...

Broadcast and listen to events in AngularJS using `$rootScope.$emit`

I am currently working on a large Angular app and I have encountered the need to trigger an event using $rootscope.$emit, and then listen to this event inside a factory. Doing this inside a controller is not feasible because the controller hasn't load ...