Preact-cli: SockJS issue when port is different than 8080

[jpoo90]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
After executing an AJAX request, this errors from sock start populating the console

If the current behavior is a bug, please provide the steps to reproduce.

• Run a server on port 8080
• npm start from the preact-cli created project.
• Use fetch to request something.
• Sock will start logging errors into the console.

What is the expected behavior?
I think sock should be mapped to the port were the app is running.

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information.

• node version: 8.1.4
• npm version: 5.3.0
• Operating system: osX
• preact-cli: 1.4.1

[filoxo]

Your server is not actually running on 8080, which you might be expecting. The CLI will randomly choose a port to run on if 8080 is taken (see the URL in your browser), but there is definitely a bug in that the hmr script isn't using that randomly-selected port. I came here to report this as well.

[didierfranc]

Same here

[developit]

Yup - looks like we're not passing port correctly.

[oieduardorabelo]

hey all 👋,

I tried to reproduce this bug but seems it is fixed on current stable version,

$ npm install -g preact-cli and test scenario below...

🐛 💥 🐞

---

[TEST SCENARIO]

• new file $ touch same.js with:

const http = require('http');

const PORT = 8080;

const server = http.createServer((req, res) => {
  res.end(`Hello http://localhost:${PORT}!`);
});

server.listen(PORT, () => {
  console.log(`Running on`, server.address())
});

• using $ node same.js
• new preact project $ preact create simple testy
• running $cd testy and $ npm install
• resolves to "preact-cli": "^2.0.0"

• and $ npm start
  
  

• opening it in my browser, Chrome Version 71.0.3544.2 (Official Build) canary (64-bit):
  

• my index.js:

import "./style";
import { Component } from "preact";

export default class App extends Component {
  componentDidMount() {
    console.log(`fetch:start`);
    fetch("https://dog.ceo/api/breeds/image/random")
      .then(res => res.json())
      .then(data => {
        console.log(`fetch:done - .then`);
        console.log(data);
      })
      .catch((err) => {
        console.log(`fetch:done - .catch`);
        console.log(err);
      });
  }
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

• no socket errors after fetch/ajax