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",