1

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

Phil
  • 157,677
  • 23
  • 242
  • 245
FreyC
  • 41
  • 1
  • 3
  • Any reason you're using the full proxy middleware? Simply adding `"proxy": "http://localhost:3030",` to your `package.json` should be enough – Phil Apr 10 '22 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 Apr 10 '22 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 Apr 10 '22 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 Apr 10 '22 at 23:37

3 Answers3

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.

FreyC
  • 41
  • 1
  • 3
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

CodeNoob
  • 25
  • 1
  • 8
  • 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 – Bhushan Patil Nov 09 '22 at 13:10
0
devServer{
onBeforeSetupMiddleware: function(app) {
          setupProxy(app);
        }
}
Saida Taj
  • 11
  • 2