React and Prettier/eslint app looping run script - javascript

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"
}

Related

Problem in connecting node js with react js using proxy server

I am trying to connect react with multiple proxy server
and got this error
error
When specified, "proxy" in package.json must be a string.
Instead, the type of "proxy" was "object".
Either remove "proxy" from package.json, or make it a string.
package.json
{
"proxy": [
"http://192.168.29.184:5000",
"http://192.168.1.5:5000",
"http://localhost:5000"
],
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
}
someone please explain how can I separate it

Start script missing error when running npm start, issue persists when changing scripts start value

Im getting this error
npm ERR! missing script: start
when I try to run 'npm start' for this new react project I'm working on. I've looked around for a solution and saw some folks found success when they did something like this in their package.json file.
"scripts": {
"start": "node index.js"
}
I attempted replicating the above code but got the same error when I tried to run "npm start". Are there any other steps I can take to fix this error?
Default scripts for a react project in package.json:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}

$ timeout <5> && react-scripts start && was unexpected at this time

"scripts": {
"build:css": "postcss src/styles/tailwind.css -o src/styles/app.css",
"watch:css": "postcss src/styles/tailwind.css -o src/styles/app.css --watch",
"react-scripts:start": "timeout <5> && react-scripts start",
"react-scripts:dist": "react-scripts build",
"start": "run-p watch:css react-scripts:start",
"build": "run-s build:css react-scripts:dist",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
This is how my scripts part in my package.json looks. I keep getting "$ timeout <5> && react-scripts start && was unexpected at this time". I tried using sleep instead of timeout but that is unrecognized as a command. I tried downloading Windows Resource Tools Kit but that download is now unavailable.
Any suggestions?
Something like this: timeout 5 /nobreak && react-scripts start
More info

How to set cross env variables to start tests before commit?

I have configured to run tests before commit. But it only works in Ubuntu.
Here what I have now:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"test:all": "CI=true react-scripts test"
},
"husky": {
"hooks": {
"pre-commit": "npm run test:all"
}
},
How to set cross env variables to run them in any operating system?
Use the cross-env package:
"test:all": "cross-env CI=true react-scripts test"
have you tried with a .env.test file? See React docs for info on .env in create-react-app create-react-app adding custom variables

How to get npm run script run the build:style script when CSS files are updated?

In my package.json I have run scripts that look like:
"scripts": {
"build:style":"tailwind build src/styles/index.css -o src/styles/tailwind.css",
"start": "npm run build:style && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I'm using this tailwindcss framework for CSS, and it uses PostCSS to update the CSS.
Currently if I update my CSS npm doesn't run the build, so my CSS changes are not visible until I stop and re-rerun:
npm run start
Is there a way for npm to watch the CSS files, and when changed also run the build:style command?
Unfortunately, I don't believe Tailwinds has a 'watch' feature. I believe one workaround would be to install the watch package.
npm install watch
You have a lot of scripts going on and without knowing how you've integrated PostCSS and the likes, it's tough to know exactly what to do. One option would be to create a new script that takes advantage of the new watch node package.
"scripts": {
"build:style":"tailwind build src/styles/index.css -o src/styles/tailwind.css",
"start": "npm run build:style && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"watch": "watch 'npm run start'"
},
If that doesn't work, check out the blog below. It uses the same methodology, but may have insight that could help you figure it out!
https://flaviocopes.com/tailwind-setup/

Categories

Resources