I just create a new react app using
create-react-app
and it worked as well , then I just cd into this app and tried
npm start
and then nothing worked & nothing appeared in the console
1- I have tried to remove node-module and then npm install again and try again
2- I tried to clean the cash and repeat step 1 and nothing worked
3- I tried to reinstall node and nothing worked ether .
that's my package.json file
{
"name": "ropofriend",
"version": "0.1.0",
"private": true,
"homepage": "https://kyrolos.github.io/Robofriend-app/.",
"dependencies": {
"gh-pages": "^2.0.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^5.1.1",
"react-scripts": "1.1.4",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"tachyons": "^4.9.1"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
try this:
"start": "cd packages/react-scripts && node bin/react-scripts.js start",
basically you have to give the address of your main view file.
or this:
"start": "node src/feathers/"
Related
I try to use Husky's pre-commit and lint-staged.
Those are installed:
"husky": "^5.1.3",
"lint-staged": "^10.5.4",
In package.json I have:
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
"lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
"isready": "npm run format && npm run lint && npm run build"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"pre-push": "npm test",
}
},
"lint-staged": {
"./src/*.{js,jsx,ts,tsx}": [
"npm run format",
"npm run lint",
"git add"
]
},
If I run npm run lint, currently I have 2 problems (1 error, 1 warning). So when I run git commit, I don't expect to be able to commit, right? But I can proceed and finish the commit.
What's wrong?
Update:
I downgraded husky to 4.3.8:
"husky": "^4.3.8",
"lint-staged": "^10.5.4",
Inside package.json, in my scripts I have:
"prettier": "prettier '**/*.{js,jsx,ts,tsx}' --write",
"lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
And:
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{ts,tsx,js,jsx}": [
"npm run prettier",
"npm run lint",
"git add"
]
},
When I do a commit, Husky is still not fired off. What's wrong?
Update 2:
I couldn't get Husky 4 to work so I upgraded to version 6:
npm install husky#6 --save-dev \
&& npx husky-init \
&& npm exec -- github:typicode/husky-4-to-6 --remove-v4-config
Now it works fine.
The only thing I can't get to work is lint-staged.
I added the hook npx husky add .husky/pre-commit "lint-staged"
But then I get .husky/pre-commit: line 4: lint-staged: command not found? How do I get lint-staged working with Husky version 6?
Making lint-staged working with Husky version 6 by adding:
// .husky/pre-commit
npm run pre-commit
and:
// package.json
{
"scripts": {
"pre-commit": "lint-staged"
}
}
Based on this husky github issue, just do these steps to make it work(we did it and it is working fine):
npx husky-init
yarn
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
yarn add #commitlint/config-conventional #commitlint/cli --dev
.commitlintrc.json:
{
"extends": ["#commitlint/config-conventional"]
}
.lintstagedrc:
{
"src/**/*.+(js|json|ts|tsx)": [
"eslint"
],
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --write"
]
}
.husky/pre-commit:
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
yarn pre-commit-lint
Finally, add pre-commit-lint script to package.json:
{
"name": "pwa-react-scaffold",
"version": "0.1.0",
"private": true,
"author": "SeyyedMahdi Hassanpour <SeyyedKhandon#gmail.com>",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"analyze": "yarn build && source-map-explorer 'build/static/js/*.js'",
"lint": "eslint --ignore-path .gitignore --ext .js,.ts,.tsx .",
"check-types": "tsc",
"prettier": "prettier --ignore-path .gitignore \"src/**/*.+(js|jsx|json|ts|tsx)\"",
"format": "yarn prettier --write",
"check-format": "yarn prettier --list-different",
"validate": "npm-run-all --parallel check-types check-format lint build",
"prepare": "husky install",
"pre-commit-lint": "yarn check-types && yarn lint-staged"
},
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^16.9.53",
"#types/react-dom": "^16.9.8",
"node-sass": "^5.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"source-map-explorer": "^2.5.2",
"typescript": "^4.0.3",
"web-vitals": "^0.2.4",
"workbox-background-sync": "^5.1.3",
"workbox-broadcast-update": "^5.1.3",
"workbox-cacheable-response": "^5.1.3",
"workbox-core": "^5.1.3",
"workbox-expiration": "^5.1.3",
"workbox-google-analytics": "^5.1.3",
"workbox-navigation-preload": "^5.1.3",
"workbox-precaching": "^5.1.3",
"workbox-range-requests": "^5.1.3",
"workbox-routing": "^5.1.3",
"workbox-strategies": "^5.1.3",
"workbox-streams": "^5.1.3"
},
"devDependencies": {
"#commitlint/cli": "^12.1.1",
"#commitlint/config-conventional": "^12.1.1",
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"eslint-config-prettier": "^8.2.0",
"eslint-plugin-jest-dom": "^3.8.0",
"eslint-plugin-testing-library": "^4.1.0",
"eslint-plugin-unused-imports": "^1.1.1",
"husky": "^6.0.0",
"lint-staged": "^10.5.4",
"npm-run-all": "^4.1.5",
"prettier": "^2.2.1"
}
}
#meez As you install husky#^5.1.3 version, Husky changed the configuration step after 5.0.0.
Configure Husky#^5.0.0:
npm i husky
npx husky install
husky install .config/husky
husky add .config/husky/pre-commit "npm test"
Link: https://dev.to/typicode/what-s-new-in-husky-5-32g5
or you can simply degrade your husky version :)
another option: Use npx in the pre-commit config
.husky/pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged
We are using Microsoft Windows for both development and hosting.
npm version - 6.8.0
node version - 10.15.3
I would like to know how I can start my ReactApp locally on my development machine as in Production environment.
We have multiple environments at work such as Test, Staging, PreProd, Prod.... etc and we want to test the behaviour of the app without actual deployment to the target env.
We've got some logic statements in the source codes by using process.env.NODE_ENV to check the different environments.
I tried to update package.json scripts section as the following. But, it doesn't work.
"scripts": {
"start": "react-scripts start",
"start-prod": "cross-env NODE_ENV=production react-scripts start",
"start-prod2": "set NODE_ENV=production&&react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I tried both start-prod and start-prod2 . Even though it hosts the app successfully, it's always in development mode. Please see the following screenshots:
npm run start-prod
npm run start-prod2
If I use npm run build, it generates the build with production env. But it takes too much time to test.
Could you please guide me how I could simulate the various environment in my development machine?
P.S. I'm just using the default create-react-app script set up and I don't have any custom webpack config file.
Complete package.json file
{
"name": "react-workout-diary",
"version": "0.10.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.18",
"#fortawesome/free-brands-svg-icons": "^5.8.2",
"#fortawesome/free-regular-svg-icons": "^5.8.2",
"#fortawesome/free-solid-svg-icons": "^5.8.2",
"#fortawesome/react-fontawesome": "^0.1.4",
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"es6-object-assign": "^1.1.0",
"es6-promise": "^4.2.6",
"formik": "^1.5.7",
"has-value": "^2.0.2",
"is-empty": "^1.2.0",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-datepicker": "^2.6.0",
"react-delay": "^0.1.0",
"react-dom": "^16.8.6",
"react-moment": "^0.9.2",
"react-redux": "^7.0.3",
"react-router-dom": "^5.0.0",
"react-scripts": "^3.0.1",
"react-toastify": "^5.2.1",
"reactstrap": "^8.0.0",
"redux": "^4.0.1",
"redux-devtools-extension": "^2.13.8",
"redux-logger": "^3.0.6",
"redux-saga": "^1.0.2",
"redux-saga-routines": "^3.1.3",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"uuid": "^3.3.2",
"yup": "^0.27.0"
},
"scripts": {
"start": "react-scripts start",
"start-prod": "cross-env NODE_ENV=production react-scripts start",
"start-prod2": "set NODE_ENV=production&&react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"cross-env": "^5.2.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.13.2",
"enzyme-to-json": "^3.3.5",
"react-test-renderer": "^16.8.6",
"redux-saga-test-plan": "^4.0.0-beta.3"
}
}
You can't change the NODE_ENV variable:
You cannot override NODE_ENV manually. This prevents developers from
accidentally deploying a slow development build to production.
What you can do is to use different .env files:
From: React documentation
Files on the left have more priority than files on the right:
npm start: .env.development.local, .env.development, .env.local, .env
npm run build: .env.production.local, .env.production, .env.local, .env
npm test: .env.test.local, .env.test, .env (note .env.local is missing)
I have a frequent problem with npm, it occurs when running npm start command in a react project folder after some time not working with that project.
I get several lines of log include 'Failed to parse json' and 'package.json must be actual JSON, not just Javascript'.
The problem always happen after i get to deal with the project after some weeks of no-use, my package.json file seems fine and this is an example
{
"name": "carzyGame",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "1.1.4",
"redux": "^4.0.0",
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
}
}
another one:
{
"name": "neighborhood",
"version": "0.1.0",
"private": true,
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
"dependencies": {
"escape-string-regexp": "^1.0.5",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-foursquare": "^1.0.3",
"react-scripts": "1.1.4",
"sort-by": "^1.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
I tried to uninstall npm by npm uninstall and i got the same error, also removing node modules file could not help (the purpose is to re-install it).
So what is the reason of that problem and how to solve it?
The faulty lines are:
"redux": "^4.0.0",
"eject": "react-scripts eject",
Unlike in JavaScript, a trailing comma is not allowed in the last key-value pair of a JSON object.
I've got a sample react app I've been messing with to build out little small side projects. But I've hit a connundrum. Ctrl+C doesn't do anything to stop my app. I have to go through task manager manually to kill it. I've attached my package json. Is there some package or approach for this?
{
"name": "practice-app",
"description": "Sample react app to practice different designs, tools and concepts",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^1.2.2",
"#material-ui/icons": "^1.1.0",
"concurrently": "^3.6.0",
"json-server": "^0.14.0",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "concurrently \"react-scripts start\" \"json-server --watch data/db.json --port 3001\"",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:3001"
}
maybe try writing an npm stop script?
"scripts": {
"start": "app.js",
"stop": "pkill --signal SIGINT myApp"
}
Hope that helps
I'm using es-lint VScode extension and it is catching 5 linting errors, however when I run npm run lint from package.json It only lists 2 errors. I'm wondering why the terminal is not outputting all linting errors, so I can fix it with esw --fix on save.
Note: I'm using both prettier and airbnb config rules.
Here is my .eslintrc:
{
"extends": ["airbnb", "prettier"],
"plugins": ["prettier"],
"globals": { "document": false }
}
Here is pacjakge.json:
{
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-scripts": "1.0.17",
"redux": "^3.7.2",
"styled-components": "^2.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint --fix ./src",
"watch:lint": "node_modules/eslint-watch/bin/esw -w --fix"
},
"devDependencies": {
"eslint": "^4.12.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-prettier": "^2.3.1",
"eslint-plugin-react": "^7.5.1",
"eslint-watch": "^3.1.3",
"prettier": "^1.9.1"
}
You are using the --fix option when running npm run lint, that means ESLint will only display errors/warnings it can't fix automatically.. everything else, it will just fix and not complain about.
If you want it to list all the errors/warning, you can remove --fix from your NPM script, and it will list all erros/warnings it finds (it will run eslint ./src). Later if you want to fix the errors as well, run npm run lint -- --fix, that will pass everything after -- directly to the script, i.e., will run eslint ./src --fix which will work correctly.