Development Server not Starting (craco start)

[emkayy]

What's happening
When using craco start instead of react-scripts start, the development server gets stuck at the console output Starting the development server... but never starting

CRACO version
"@craco/craco": "^7.1.0",
"react-scripts": "5.0.1",

on nodejs 18.16.1

CRACO config

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.optimization.splitChunks = {
        chunks: "all",
      };

      return webpackConfig;
    },
  },
};

package.json

  "dependencies": {
    "@azure/msal-browser": "2.28.3",
    "@azure/msal-react": "1.4.7",
    "@emotion/react": "11.10.0",
    "@emotion/styled": "11.10.0",
    "@hookform/error-message": "^2.0.0",
    "@hookform/resolvers": "^2.9.7",
    "@iconify/react": "^3.2.2",
    "@mui/icons-material": "5.8.4",
    "@mui/lab": "5.0.0-alpha.93",
    "@mui/material": "5.9.3",
    "@mui/x-date-pickers": "5.0.0-beta.5",
    "@reduxjs/toolkit": "^1.8.3",
    "axios": "^0.27.2",
    "classnames": "^2.3.2",
    "date-fns": "^2.29.1",
    "dayjs": "^1.11.7",
    "env-cmd": "^10.1.0",
    "i18next": "^21.8.16",
    "i18next-browser-languagedetector": "^6.1.4",
    "i18next-http-backend": "^1.4.1",
    "include-media": "^2.0.0",
    "js-cookie": "^3.0.1",
    "js-file-download": "^0.4.12",
    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "mui-tel-input": "^2.1.0",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-background-video-player": "^1.1.8",
    "react-dom": "^18.2.0",
    "react-dropzone": "^14.2.2",
    "react-helmet-async": "^1.3.0",
    "react-hook-form": "^7.34.0",
    "react-i18next": "^11.18.3",
    "react-player": "2.11.0",
    "react-query": "^3.39.3",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "react-toastify": "^9.0.8",
    "react-transition-group": "^4.4.5",
    "simplebar": "^5.3.8",
    "simplebar-react": "^2.4.1",
    "store2": "^2.14.2",
    "tinycolor2": "^1.4.2",
    "use-debounce": "^8.0.4",
    "uuid": "^9.0.0",
    "web-vitals": "^2.1.4",
    "workbox-precaching": "^6.6.0",
    "workbox-routing": "^6.6.0",
    "workbox-strategies": "^6.6.0",
    "workbox-window": "^7.0.0",
    "xlsx": "^0.18.5",
    "yup": "^0.32.11"

Additional information

Using eslint

If I change *only" craco start back to react-scripts start, the server starts again, however eslint warnings don't appear in the terminal.
If I also change craco test back to react-scripts test, eslint warnings get logged in the terminal again, even when only running react-scripts start.

Console output:

> craco start --verbose

Project root path resolved to:  C:\Users\emkayy\FrontEnd
Override started with arguments:  [
  'C:\\Program Files\\nodejs\\node.exe',
  'C:\\Users\\emkayy\\FrontEnd\\node_modules\\@craco\\craco\\dist\\scripts\\start.js',
  '--verbose'
]
For environment:  development
Config file path resolved to:  C:\Users\emkayy\FrontEnd\craco.config.js
Applied craco config plugins.

Logging the webpack configuration in the craco.config.js looks ok.

[Dilan Nair]

All craco is doing here is injecting the webpack config you specified into create react app. This would be a webpack issue rather than a craco one.

[HANG Code]

I also encountered the same problem, you can consider the development of webpack configuration notes, to be completed after the development of the build, uncomment, often webpack configuration is online some of the details of optimization, the development process can be temporarily ignored