Typescript setupProxy.js whit custom webPack config

Question

I have to set the header Access-Control-Allow-Origin to * in my setupProxy.js in a typescript React app. but I can't. I'm not sure if setupProxy.js (ts) in typescript is suported.

But I need it for a microfronted application.

Here is my custom webpack config (using react-app-rewired)

module.exports = {
    webpack: (config, env) => {
      config.optimization.runtimeChunk = false;
      config.optimization.splitChunks = {
        cacheGroups: {
          default: false,
        },
      };
  
      config.output.filename = "static/js/[name].js";
  
      config.plugins[5].options.filename = "static/css/[name].css";
      config.plugins[5].options.moduleFilename = () => "static/css/main.css";
      return config;
    },
  };

And here is my src/setupProxy.js

module.exports = (app) => {
    app.use((req, res, next) => {
      res.header("Access-Control-Allow-Origin", "*");
      next();
    });
  };

And my npm scripts

"scripts": {
    "start": "PORT=3031 react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

If there is another way to achieve what I want it will be awesome.

Answer 1

My bad, I created the react app using CRA and then added TS, the right way to do it is with npx create-react-app my-app --template typescript