CODEWITHSUNDEEP
reactjsproxyhttp-proxy-middleware
lachnroll
lachnroll

Reputation: 227

localhost:3000 This site can’t be reached after installing http-proxy-middleware

I am building a newsletter sign-up form that uses .netlify-lambda to send my form submission to Mailchimp. I installed http-proxy-middleware to help the front end find the netlify-lambda folder. After writing the proxy setup code below my React start script stopped working. It appears the proxy setup below is interfering with localhost:3000.

My proxy setup looks like this

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

module.exports = function(app) {
    console.log('Using proxy...')
    app.use(proxy('/.netlify/functions/', { 
        target: 'http://localhost:9000/',
            "pathRewrite": {
                "^\\.netlify/functions": ""
            }
    }));
};

If the target is localhost:9000 why is it interfering with localhost:3000? When I start my Lambda server it says: Lambda server is listening on 9000.

I am also getting this error when trying to compile my client app. crbug/1173575, non-JS module files deprecated

Upvotes: 2

Views: 1300

Answers (1)

Jake Lee
Jake Lee

Reputation: 41

Short answer (for @lachnroll and anyone who might be encountering the same problem):

Please use const { createProxyMiddleware } = require("http-proxy-middleware") and app.use(createProxyMiddleware('/.netlify/functions/' ...)...) , instead of using const proxy = require('http-proxy-middleware'); and app.use(proxy("/.netlify/functions/" ...)...) , it should work.

Long one:

I've come across the same "can't be reached" thing in a React project when using http-proxy-middleware(2.0.3), until I changed const proxy = require('http-proxy-middleware'); and proxy("/.netlify/functions/" ...) to const { createProxyMiddleware } = require("http-proxy-middleware"); and app.use(createProxyMiddleware('/.netlify/functions/' ...)...) , I think the proxy has been removed, see: https://github.com/chimurai/http-proxy-middleware#readme

Upvotes: 3

Related Questions