Skip to content

Upgrading from react-script 3.3.1 to react-scripts 3.4.0 required changing setupProxy #8513

Closed

Description

@breathe

Not 100% sure why -- but after upgrading to react-scripts 3.4.0 it became necessary for me to change the way that I'm requiring the http proxy ...

The instructions from here -- https://create-react-app.dev/docs/proxying-api-requests-in-development/ -- fail with 'proxy is not a function'

I had to change this code (which was working before ...):

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

const setupBackend = require("./setupBackend");
const target = setupBackend();

module.exports = function(app) {
  console.log("Setting up proxy url's on development server");

  app.use(
    ["/token_api", "/__meta_request"],
    proxy({
      target,
      changeOrigin: true,
      preserveHeaderKeyCase: false
    })
  );
};

To this:

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

const setupBackend = require("./setupBackend");
const target = setupBackend();

module.exports = function(app) {
  console.log("Setting up proxy url's on development server");

  app.use(
    ["/token_api", "/__meta_request"],
    proxy({
      target,
      changeOrigin: true,
      preserveHeaderKeyCase: false
    })
  );
};

Activity

  1. changed the title [-]Upgrading from react-script 3.3.1 to react-scripts 3.4.0 required setupProxy[/-] [+]Upgrading from react-script 3.3.1 to react-scripts 3.4.0 required changing setupProxy[/+] on Feb 19, 2020
  2. partynikko commented on Feb 19, 2020

    @partynikko

    Your two examples are identical. Did you accidentally paste the same code twice?

  3. breathe commented on Feb 19, 2020

    @breathe
    Author

    @partynikko oops I did ... edited.

    The original code I had to change used the default export off of the http-proxy-middleware ...

    const proxy = require("http-proxy-middleware");
    
    const setupBackend = require("./setupBackend");
    const target = setupBackend();
    
    module.exports = function(app) {
      console.log("Setting up proxy url's on development server");
    
      app.use(
        ["/token_api", "/__meta_request"],
        proxy({
          target,
          changeOrigin: true,
          preserveHeaderKeyCase: false
        })
      );
    };
    
  4. partynikko commented on Feb 19, 2020

    @partynikko

    This has nothing to do with CRA but with http-proxy-middleware package. They just released a new major version introducing breaking changes like the one you are referring to.

    Could it be that you probably upgraded that package and confused it with the update of react-scripts?

  5. hjr3 commented on Feb 19, 2020

    @hjr3
    Contributor

    https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually is now wrong due to the breaking changes in http-proxy-middleware.

    I opened #8515 to fix.

  6. locked and limited conversation to collaborators on Mar 10, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions