0

I have a CRA app with react-scripts@5.0.1 and an express API backend. Using proxy in package.json caused it to fail on startup, so I created a setupProxy.js per the documentation.

The docs indicate that as long as the file is named correctly, react-scripts will pick it up automatically. It doesn't, and I have no idea why. FWIW, I'm using craco, but I have verified I have the same issue when using react-scripts.

Things I've tried to fix the issue

I found this answer which said I could just add devServer to my craco.config.ts file. I've tried adding the code both as a property of the root craco config and as one of module.exports.webpack.

module.exports: import('craco__craco').CracoConfig = {
  devServer: {
    proxy: {
      '/api': 'http://localhost:5000'
    },
  },
  // ...
};

module.exports: import('craco__craco').CracoConfig = {
  webpack: {
    // @ts-ignore
    devServer: {
      proxy: {
          '/api': 'http://localhost:5000'
      }
    },
    // ...
  }
  // ...
};

As you can see in the latter, I had to use // @ts-ignore to get that to compile. Neither worked.

TLDR; Things I've done to confirm the file isn't being picked up at all

  • Add logging to setupProxy.js
  • Made setupProxy.js throw an error
  • Debugged w/ VSCode

setupProxy.js

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

console.log('*****\nsetupProxy.js called\n*****'.rainbow);

module.exports = function (app) {
  console.log('*****\nSetting up proxy\n*****'.rainbow);
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://dev.spellingbeehints.app:4000',
      changeOrigin: true,
    })
  );
};

The two console.log calls never happen. I tried console.error just in case CRA was swallowing them, but same issue. I've also set a breakpoint in the file and debugged to confirm the file is never hit. craco.config.ts is, so I know I've set up my VSCode launch.json correctly.

I've also replaced my setupProxy.js code with throw new Error("this ain't working ");, and the app starts up fine.

When I fetch() from /api/... it retrieves the HTML page that runs the React app, but that's to be expected since the proxy doesn't get setup.

Just in case it's my .env file...

HTTPS=true
SSL_CRT_FILE=./certs/cert.pem
SSL_KEY_FILE=./certs/privkey.pem
HOST=dev.example.com

I do have a workaround using webpack.DefinePlugin, but it's less than ideal. Any help would be most appreciated.

dx_over_dt
  • 13,240
  • 17
  • 54
  • 102
  • With a box-fresh CRA app, if I `echo 'throw new Error("fail");' > src/setupProxy.js` then `npm start` the app fails to load in the browser, whereas without that file it loads fine. So it _does_ seem to be getting picked up. – jonrsharpe Jul 22 '23 at 19:25
  • @jonrsharpe oops! I placed `setupProxy.js` at my root rather than in `src`. That'll do it. – dx_over_dt Jul 24 '23 at 20:19

1 Answers1

0

It turned out to be a PEBKAC error. Not surprising. I had placed setupProxy.js in my root dir rather than in /src.

dx_over_dt
  • 13,240
  • 17
  • 54
  • 102