React App - createProxyMiddleware is not a function

Question

I am working on a react project and am running into some issues with http-proxy-middleware. I followed the readme and my setupProxy.js file looks like this

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


module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://localhost:3000',
      changeOrigin: true
    })
  );
};

Anyone have any ideas as to why this might be occurring? From what I've seen, this is the correct way to set this up. Any response or suggestions will be greatly appreciated.

Woodpile

Do you see http-proxy-middleware in your package.json? – Girish

Putting this out there just in case: after installing http-proxy-middleware, check your package.json file like Sohaib said then be sure to restart both of the servers!! – Woodpile

Answer 1

Removing the brackets works for me

const createProxyMiddleware = require('http-proxy-middleware');

Found that fix here https://www.reddit.com/r/reactjs/comments/jzoo3y/createproxymiddleware_is_not_a_function_how_can_i/

Jobey

Answer 2

If all React js component files are in the component folder(or in another folder) then shift your Setupproxy.js file in that folder now you can use

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

For global, put your Setupproxy.js file in src folder then you have to remove {}

const createProxyMiddleware = require('http-proxy-middleware');

Colander

Why would it depend on whether there are other files in the same folder? Can you explain? – Unreadable