diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js
index 516513081b20619badc031eeb0d5df0608b81870..09a7dacd199bad727ce337148bc7008a551809a8 100644
--- a/packages/react-scripts/config/paths.js
+++ b/packages/react-scripts/config/paths.js
@@ -32,6 +32,7 @@ const publicUrlOrPath = getPublicUrlOrPath(
 const moduleFileExtensions = [
   'web.mjs',
   'mjs',
+  'cjs',
   'web.js',
   'js',
   'web.ts',
@@ -70,7 +71,7 @@ module.exports = {
   appJsConfig: resolveApp('jsconfig.json'),
   yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
-  proxySetup: resolveApp('src/setupProxy.js'),
+  proxySetup: resolveModule(resolveApp, 'src/setupProxy'),
   appNodeModules: resolveApp('node_modules'),
   swSrc: resolveModule(resolveApp, 'src/service-worker'),
   publicUrlOrPath,
@@ -93,7 +94,7 @@ module.exports = {
   appJsConfig: resolveApp('jsconfig.json'),
   yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
-  proxySetup: resolveApp('src/setupProxy.js'),
+  proxySetup: resolveModule(resolveApp, 'src/setupProxy'),
   appNodeModules: resolveApp('node_modules'),
   swSrc: resolveModule(resolveApp, 'src/service-worker'),
   publicUrlOrPath,
@@ -129,7 +130,7 @@ if (
     appJsConfig: resolveOwn(`${templatePath}/jsconfig.json`),
     yarnLockFile: resolveOwn(`${templatePath}/yarn.lock`),
     testsSetup: resolveModule(resolveOwn, `${templatePath}/src/setupTests`),
-    proxySetup: resolveOwn(`${templatePath}/src/setupProxy.js`),
+    proxySetup: resolveModule(resolveOwn, `${templatePath}/src/setupProxy`),
     appNodeModules: resolveOwn('node_modules'),
     swSrc: resolveModule(resolveOwn, `${templatePath}/src/service-worker`),
     publicUrlOrPath,
diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js
index bf8c98d0d912e610f8c0b78eb30c29ce0c1627ca..3e65940ed6beb4e27cd487ecb12bd0808fb8cf15 100644
--- a/packages/react-scripts/config/webpackDevServer.config.js
+++ b/packages/react-scripts/config/webpackDevServer.config.js
@@ -119,8 +119,24 @@ module.exports = function (proxy, allowedHost) {
       app.use(errorOverlayMiddleware());
 
       if (fs.existsSync(paths.proxySetup)) {
-        // This registers user provided middleware for proxy reasons
-        require(paths.proxySetup)(app);
+        // This registers user provided middleware for proxy reasons.
+        // @babel/register is used to add support for the types of code that work in the frontend
+        require('@babel/register')({
+          presets: [require.resolve('babel-preset-react-app')],
+          ignore: [/node_modules/],
+          extensions: paths.moduleFileExtensions.map(ext => `.${ext}`),
+        });
+        const middleware = require(paths.proxySetup);
+        // Provide the app to the middleware.
+        // If there's a default export from ESM code, use it.
+        if (
+          typeof middleware === 'object' &&
+          typeof middleware.default === 'function'
+        ) {
+          middleware.default(app);
+        } else {
+          middleware(app);
+        }
       }
     },
     after(app) {
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index e7cf28e19247f799ce473a5ffc88e65d22ef365d..eeaadbe4ad0fd559c1a4070aff95d31f84384f75 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -29,6 +29,7 @@
   "types": "./lib/react-app.d.ts",
   "dependencies": {
     "@babel/core": "7.12.3",
+    "@babel/register": "7.12.10",
     "@pmmmwh/react-refresh-webpack-plugin": "0.4.2",
     "@svgr/webpack": "5.5.0",
     "@typescript-eslint/eslint-plugin": "^4.5.0",