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."

Any reason you're using the full proxy middleware? Simply adding "proxy": "http://localhost:3030", to your package.json should be enough — Phil
– Phil, Commented Apr 10, 2022 at 23:28
Mentioned that in the question-- for whatever reason, adding that line to package.json throws a completely different error when I start the app up, "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." — FreyC
– FreyC, Commented Apr 10, 2022 at 23:30
Did you use create-react-app to bootstrap your frontend app? What versions of react-scripts and other React dependencies do you have in your package.json? Have you tried a fresh install, eg rm -r node_modules package-lock.json && npm install (or the yarn equivalents)? — Phil
– Phil, Commented Apr 10, 2022 at 23:33
Managed to resolve the issue on my own. Due to habit from another couple projects I had "type": "module" in my package json, thus using import statements rather than requires. Even when using the correct format for the setupProxy, it would still give me the issue, so I instead tried removing it and switching back to requires and suddenly it works. — FreyC
– FreyC, Commented Apr 10, 2022 at 23:37

FreyC · Accepted Answer · 2022-04-10 23:39:59Z

2

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.

answered Apr 10, 2022 at 23:39

FreyC

511 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CodeNoob · Accepted Answer · 2022-07-12 21:41:51Z

1

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

answered Jul 12, 2022 at 21:41

CodeNoob

352 silver badges10 bronze badges

1 Comment

Bhushan Patil Over a year ago

This worked for me too though. But not sure if the proxy is is working or not. Any idea how to check that? The thing is I am still getting the error of cors but not sure if my thing is not configured correctly or its an issue from backend

Saida Taj · Accepted Answer · 2023-04-11 21:00:52Z

0

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

answered Apr 11, 2023 at 21:00

Saida Taj

113 bronze badges

Collectives™ on Stack Overflow

React App Not Loading When Using http-proxy-middleware

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related