Support setupProxy.mjs

[ulrichb]

Is your proposal related to a problem?

Now as Node.JS 13.2 un-prefixed ES 6 Modules, I'd like to use ES 6 imports in my setupProxy.mjs, but CRA forces me to use setupProxy.js.

Describe the solution you'd like

Next to setupProxy.js, allow to use setupProxy.mjs (or setupProxy.cjs).

See also https://nodejs.org/api/esm.html#esm_enabling.

[orszaczky]

Is there any workaround for this? I can't share config with dynamic import between setupProxy (common js) and my app (esm)...

[johnnyBira]

I've got the same problem. Any plans on addressing this issue?

[razor-x]

Here is a patch-package you can use until the PR is merged

patches/react-scripts+5.0.1.patch

diff --git a/node_modules/react-scripts/config/paths.js b/node_modules/react-scripts/config/paths.js
index f4470a0..025491f 100644
--- a/node_modules/react-scripts/config/paths.js
+++ b/node_modules/react-scripts/config/paths.js
@@ -72,7 +72,7 @@ module.exports = {
   appJsConfig: resolveApp('jsconfig.json'),
   yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
-  proxySetup: resolveApp('src/setupProxy.js'),
+  proxySetup: resolveApp('src/setupProxy.cjs'),
   appNodeModules: resolveApp('node_modules'),
   appWebpackCache: resolveApp('node_modules/.cache'),
   appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'),
@@ -97,7 +97,7 @@ module.exports = {
   appJsConfig: resolveApp('jsconfig.json'),
   yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
-  proxySetup: resolveApp('src/setupProxy.js'),
+  proxySetup: resolveApp('src/setupProxy.cjs'),
   appNodeModules: resolveApp('node_modules'),
   appWebpackCache: resolveApp('node_modules/.cache'),
   appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'),
@@ -135,7 +135,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: resolveOwn(`${templatePath}/src/setupProxy.cjs`),
     appNodeModules: resolveOwn('node_modules'),
     appWebpackCache: resolveOwn('node_modules/.cache'),
     appTsBuildInfoFile: resolveOwn('node_modules/.cache/tsconfig.tsbuildinfo'),

[orszaczky]

So cool, 2 years passed and PR still not solved :)

[yuval9313]

I've also encountered that issue
The thing is, I can't seem to reproduce the settings in which I had this working

[razor-x]

As an alternative solution, I've opened #11564 which must be merged before v5 is released as it is a breaking change.

[kenlyon]

I have a workaround. It's pretty gross, but it got me unstuck today.

My app is using ESM as the default format. My /package.json has "type": "module".

When I made the change, the react-app-rewired build complained about /src/setupProxy.js being ESM so I changed it to .cjs and thought I was done. Only today (weeks later) did I notice that /src/setupProxy.cjs is ignored.

Here's the fix for defining your own custom setupProxy logic in an ESM world:

1. Create a folder called /src/setupProxy.js.
2. Move your old setupProxy content into a new file called /src/setupProxy.js/index.js. The content of this file must be in CommonJS format.
3. Create a file called /src/setupProxy.js/package.json that contains the text { "type": "commonjs" }. This ensures the neighbouring file is loaded as CommonJS, so it will work when it's "require'd" in.

So, to recap - your structure should now be:

• src
  • setupProxy.js (a directory!)
    • index.js
    • package.json

It's not pretty, but it works!

Thanks to @eric-parsons for the idea of a directory with the .js extension. That was the key!

[RThevenoux]

@kenlyon Thank you very much !
I don't know if there is a fix for this problem, but your solution save my day !

[Freddis]

@kenlyon 's solution is not complete. You are able to require CommonJS module with that, but it doesn't solve the problem completely.

Since the problem appears when you turn the projects into ESM. For instance when you're switching to Typescript, with which ESM seems to be mandatory by react-scripts (it even changes the module type in the tsconfig automatically when being run).

So even though you're able to run setupProxy.js/index.js or setupProxy/index.ts with that approach you still not able to import your files from there since it's CommonJS module. Especially given that app.use() is expected to be syncronious call which has to be called before the Webpack development server has started.

Here's my little workaround for that. I use the @kenlyon file structure and that is the contents of my index.ts:

// Dirty hack to make setupProxy work with ES Modules
// Since CommonJS doesn't allow for synchronous import
// we register the middleware synchronously and
// use the emsMiddleWhere only when it's loaded
let esmModule :any = null
module.exports = async function (app: any) {
  app.use(async (req:any, res:any, next:any) => {
    if (esmModule) {
      esmModule.default(req,res,next)
      return
    }
    next()
  })
  esmModule = await import('../setupProxyEsmMiddleware')
}

Works like a charm.
Not sure if it's gonna be important in other cases but i use Node 14 and these options to allow for typescript and directory imports:
NODE_OPTIONS='--loader ts-node/esm --experimental-specifier-resolution=node'

It's needed to be passed as an ENV variable, since the node itself is wrapped in react-scripts:
NODE_OPTIONS='--loader ts-node/esm --experimental-specifier-resolution=node' react-scripts start

Note that using --loader ts-node/esm in my case breaks 'react-scripts build' for some reason. But it's not a problem in my case, since I only need these option to run 'react-scripts start', so I simply removed it from the build script.