Question 74288 in Reactjs Question posted in
The new location for the React Documentation can be found here.

React and Prettier/eslint app looping run script – Reactjs

My Create React App is compiling over and over. Aside the fact is shouldn’t do that its also very distracting.

this is the output from the default npm run start

I’m guessing it’s something to do with linting, ideas?

enter image description here

EDIT:

scripts requested:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint:check": "eslint . --max-warnings=0",
    "lint:fix": "eslint . --fix --max-warnings=0",
    "prettier:check": "prettier . --check",
    "prettier:fix": "prettier . --write"
  }

EDIT 2:
I have now removed all eslint packages from the project and deleted the prettier and eslint files and the app still behaves as shown in the GIF attached to this

EDIT 3:

For anyone who sees this, it still isn’t solved.

  • removed linting completely
  • redone all my typescript types and interfaces making sure they’re correctly referenced etc…
  • tried it on Mac, Windows, Linux all of them do the same thing.
  • Launched the app outside of an IDE using Powershell and zsh they do the same thing
  • updated all my packages
  • got a fresh tsconfig file
  • removed node_modules
  • tried yarn an npm both of them do the same

I’m at a loss here, the comments and answers are all helpful but non of them solve the issue.

Tags:

2

Answers


  1. 0

    there are seveal things that could be happening.

    here are some from what I’ve encountered in the past:

    1. There is a file that keeps changing on you. maybe you IDE is opened and for some reason is saving the file, or a script is updating it, or for some other reason it’s being updated and thus reinitiates the compilation.
    2. Cache might be messing things up. Try running npm start -- --reset-cache. Clearing the cache might be helpful.
    3. Switchup the environment. i.e. setup the project on a clear&fresh virutal machine.
    4. Disable linting & prettier temporarily. Remove all eslint and prettier commands from package.json and rerun the project.
    Login or Signup to reply.
  2. 0

    My guess is that there’s a file somewhere in your project directory that gets updated continually. webpack detects the updates and rebuilds your project each time.

    Here are some ways to test this theory:

    1. Download a file watcher application and point it at your project directory to see if/which files are being modified.
    2. Instead of loading your app with react-scripts start, create a minimal webpack.config.js (or copy the default one from react-scripts) and run your project with webpack serve as your start script. Use a plug-in to determine which files are being updated.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search