React App Not Loading When Using http-proxy-middleware

Question

Alright, I've about reached the end of my sanity on this one.

So, I have a basic React frontend w/ an Express backend. React is running off of localhost:3000, the backend is running off of localhost:3030. Following along on a guide for setting up some Spotify integration, everything works fine up until I hit the portion on setting up a proxy. (I have a slightly different setup from the Spotify guide, all my stuff runs through /spotify/auth rather than /auth)

I installed http-proxy-middleware, created the setupProxy.js in my /src folder, and if I ever try to load up localhost:3000 as normal, I get nothing-- my app doesn't load at all.

The only way to have the app appear again is to remove the file. The one on the spotify guide is a bit out of date as far as I can tell anyway, but even using suggestions found elsewhere, I've gotten no luck. Here is the current setup I have for my setupProxy.js file:

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/spotify/**",
    createProxyMiddleware({
      target: "http://localhost:3030",
      changeOrigin: true,
    })
  );
};

I've even removed the actual fetch that would be making use of the proxy and still have no luck loading my page. I am also unable to use "proxy": "http://localhost:3030" in my package.json as it throws:

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

- options.allowedHosts[0] should be a non-empty string."

Answer 1

Managed to solve my problem, though I am still unsure of why it works.

The issue I was running into stems from using "type": "module" in the package.json. I was using correct import statements in all of my backend, as well as tried to use it for the setupProxy.js as well, however this would always result in the issue from the question. After removing the line and swapping out the imports for requires in my backend, everything started working.

It seems like a strange compatibility issue, but there's probably a much better explanation.

Answer 2

Had the same problem as you where my react app wasn't loading because of http-proxy-middleware. Different problem/solution, but for people that also had this problem, and were following this youtube video https://www.youtube.com/watch?v=hxyp_LkKDdk

The tutorial has

const proxy = require("http-proxy-middleware")

instead of

const {createProxyMiddleware} = require("http-proxy-middleware")

After I made that change, my issue was solved. Don't forget to change "proxy" to "createProxyMiddleware" in app.use() as well

Answer 3

devServer{
onBeforeSetupMiddleware: function(app) {
          setupProxy(app);
        }
}