Development Server not Starting (craco start)

emkayy commented 1 year ago

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.

dilanx commented 1 year ago

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.

tuhanglsWorld commented 1 year ago

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

dilanx / craco

Development Server not Starting (craco start) #520

Using eslint