Craco+CRA strows middleware deprecation warnings from CRA.

What's happening I have a working Craco 5/React 16/Node14 project (https://github.com/MattGyverLee/prestige) that I'm trying to rebuild in Craco 7/React 18/Node 18 from scratch. I ran CRA and got a working app. I added a CRACO config and got a working app, then added Electron. In my old app, I would use this command to start both webpack and the Electron server: "electron-dev": "env-cmd -f .env.electron concurrently \"craco start --config craco.config.js\" \"wait-on http://localhost:3000 && electron public/electron.js",. It would simply wait until port 3000 woke up and then start Electron.

My env.electron on both projects looks like this:

REACT_APP_NAME=PrestigeElec
REACT_APP_MODE=electron
BROWSER=none
SKIP_PREFLIGHT_CHECK=true

On my new app, I'm using

"electron-dev3": "env-cmd -f .env.electron concurrently \"craco start --config craco.config.js\" \"wait-on http://localhost:3000 && electron public/electron.js",

Initially, I was getting the deprecation warnings shown here: https://github.com/facebook/create-react-app/issues/11860 I understand that these are warnings from react-scripts and not errors, but they cause the wait-on to never trigger. I used this post: https://github.com/facebook/create-react-app/issues/11860#issuecomment-1140417343 and this post: https://github.com/facebook/create-react-app/issues/12035#issuecomment-1238144577 to resolve/hide the warnings (along with testing CRACO 7.0.0, 7.0.0-alpha.3 and 7.0.0-alpha.5`.

Unfortunately, wait-on still never triggered, and I didn't know why. It just sat and waited indefinitely after the server was running until I crashed it:

C:\Github\prestigenext>yarn electron-dev
yarn run v1.22.19
$ env-cmd -f .env.electron concurrently "craco start --config craco.config.js" "wait-on http://localhost:3000 && electron public/electron.js
[0] Starting the development server...
[0]
[0] Compiled successfully!
[0]
[0] You can now view prestige in the browser.
[0]
[0]   Local:            http://localhost:3000
[0]   On Your Network:  http://192.168.8.165:3000
[0]
[0] Note that the development build is not optimized.
[0] To create a production build, use yarn build.
[0]
[0] webpack compiled successfully
[0] No issues found.

C:\Github\prestigenext>[1] ^C^CTerminate batch job (Y/N)? Terminate batch job (Y/N)? craco start --config craco.config.js exited with code 1
[1] wait-on tcp:3000 && electron public/electron.js exited with code 1

Finally, after writing all this, I tested with my local IP address instead of localhost, and wait-on worked. Then I found this post that offers the workaround of http://127.0.0.1:3000 . https://stackoverflow.com/questions/74448801/react-stuck-at-wait-on-at-localhost3000

What should happen Once the deprecation bug is solved with react-scripts, CRACO should probably be updated so that we don't need the devServer workaround.

To reproduce

CREATE a CRA app with CRACO.
Try to start it, and get the deprecation error.

CRACO version CRACO 7.0.0, 7.0.0-alpha.3 and 7.0.0-alpha.5`.

CRACO config

const fs = require("fs");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const evalSourceMap = require("react-dev-utils/evalSourceMapMiddleware");
const redirectServedPath = require("react-dev-utils/redirectServedPathMiddleware");
const noopServiceWorker = require("react-dev-utils/noopServiceWorkerMiddleware");
module.exports = {
  webpack: {
    plugins: {
      add: [
        new NodePolyfillPlugin({
          excludeAliases: ["console"],
        }),
      ],
    },
  },
  devServer: (devServerConfig, { env, paths }) => {
    devServerConfig = {
      onBeforeSetupMiddleware: undefined,
      onAfterSetupMiddleware: undefined,
      setupMiddlewares: (middlewares, devServer) => {
        if (!devServer) {
          throw new Error("webpack-dev-server is not defined");
        }
        if (fs.existsSync(paths.proxySetup)) {
          require(paths.proxySetup)(devServer.app);
        }
        middlewares.push(
          evalSourceMap(devServer),
          redirectServedPath(paths.publicUrlOrPath),
          noopServiceWorker(paths.publicUrlOrPath)
        );
        return middlewares;
      },
    };
    return devServerConfig;
  },
};

package.json

{
  "name": "prestige",
  "version": "0.4.0",
  "main": "public/electron.js",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.12",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "concurrently": "^7.6.0",
    "cross-env": "^7.0.3",
    "electron": "^23.1.1",
    "electron-is-dev": "^2.0.0",
    "env-cmd": "^10.1.0",
    "node-polyfill-webpack-plugin": "^2.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "sleep": "^6.3.0",
    "typescript": "^4.9.5",
    "wait-on": "^7.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "electron-dev": "env-cmd -f .env.electron concurrently \"craco start --config craco.config.js\" \"wait-on http://127.0.0.1:3000 && electron ."

  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@craco/craco": "^7.0.0-alpha.5"
  }
}

Additional information I realize that this is a sticky incompatibility between CRACO and CRA (with an open issue).

dilanx / craco

Craco+CRA strows middleware deprecation warnings from CRA. #495