英文:
React and Prettier/eslint app looping run script
问题
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?
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 none of them solve the issue.
英文:
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?
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.
答案1
得分: 2
有几种可能的情况。
以下是我过去遇到过的一些情况:
- 有一个文件在不断变化。也许你的IDE打开了,由于某种原因正在保存文件,或者脚本正在更新它,或者由于某种其他原因正在更新,从而重新启动编译。
- 缓存可能搞乱了事情。尝试运行
npm start -- --reset-cache
。清除缓存可能有帮助。 - 切换环境。即在一个清晰且新鲜的虚拟机上设置项目。
- 暂时禁用 linting 和 prettier。从 package.json 中删除所有
eslint
和prettier
命令,然后重新运行项目。
英文:
there are seveal things that could be happening.
here are some from what I've encountered in the past:
- 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.
- Cache might be messing things up. Try running
npm start -- --reset-cache
. Clearing the cache might be helpful. - Switchup the environment. i.e. setup the project on a clear&fresh virutal machine.
- Disable linting & prettier temporarily. Remove all
eslint
andprettier
commands from package.json and rerun the project.
答案2
得分: 0
我的猜测是你的项目目录中可能有一个文件不断被更新。webpack检测到这些更新,并且每次重新构建你的项目。
以下是测试这个理论的一些方法:
- 下载一个文件监视器应用程序,并将其指向你的项目目录,查看哪些文件被修改了。
- 不要使用
react-scripts start
来启动你的应用,而是创建一个简单的webpack.config.js
文件(或者从react-scripts
中复制默认的配置文件),然后使用webpack serve
作为启动脚本来运行你的项目。使用一个插件来确定哪些文件正在被更新。
英文:
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:
- Download a file watcher application and point it at your project directory to see if/which files are being modified.
- Instead of loading your app with
react-scripts start
, create a minimalwebpack.config.js
(or copy the default one fromreact-scripts
) and run your project withwebpack serve
as your start script. Use a plug-in to determine which files are being updated.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论