Getting issues while installing React Project on Windows system - node.js

I am trying to install a React Web Application on my Windows system. It was working fine earlier but when I re-installed my Windows then it stopped working. I have already installed Node and Npm.
When I run the command npm install it goes well. But when I run the command npm start it throws the following error:
REACT_APP_ENV is not recognized as an internal or external command
Please see the attached image also:
I have tried a lot to find and fix the issue but nothing worked.
Here is package.json file content:
{
"name": "wm-webapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"gapi-client": "0.0.3",
"libphonenumber-js": "^1.7.7",
"moment": "^2.24.0",
"node-sass": "^4.11.0",
"react": "^16.7.0",
"react-bootstrap": "^0.32.4",
"react-dates": "^18.4.1",
"react-dom": "^16.7.0",
"react-facebook-login": "^4.1.1",
"react-google-login": "^5.0.0",
"react-places-autocomplete": "^7.2.0",
"react-redux": "^5.0.7",
"react-responsive": "^6.1.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^5.0.0-alpha.9",
"react-scripts": "2.1.3",
"react-select": "^1.2.1",
"react-stripe-elements": "^2.0.2",
"react-table": "^6.8.6",
"react-toastify": "^4.5.2",
"redux": "^4.0.1",
"redux-devtools-extension": "^2.13.7",
"redux-form": "^8.1.0",
"redux-form-input-masks": "^1.3.0",
"redux-logger": "^3.0.6",
"redux-saga": "^1.0.0",
"redux-thunk": "^2.3.0",
"store": "^2.0.12",
"styled-components": "^4.1.3"
},
"scripts": {
"start:env": "env-cmd .env.${REACT_APP_ENV} react-scripts start",
"start": "REACT_APP_ENV=dev npm run start:env",
"start:test": "REACT_APP_ENV=test npm run start:env",
"build:env": "env-cmd .env.${REACT_APP_ENV} react-scripts build",
"build": "REACT_APP_ENV=test npm run build:env",
"build:prod": "REACT_APP_ENV=prod npm run build:env",
"test": "react-scripts test",
"eject": "react-scripts eject",
"deploy": "aws s3 cp build s3://test.washmix.com/ --recursive --profile washmix",
"format": "prettier --write --single-quote --tab-width=2 --print-width=80"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"axios-mock-adapter": "^1.16.0",
"env-cmd": "^8.0.2",
"husky": "^1.3.1",
"prettier": "^1.16.1"
}
}

Already late to answer but for people searching for the answer..
For Windows (cmd.exe) :
'set "REACT_APP_ENV=dev" && npm run start'
For Windows (Powershell) :
'($env:REACT_APP_ENV = "dev") -and (npm start)'
For Linux, macOS (Bash) :
'REACT_APP_ENV=dev npm start'
You can anytime get thing variable with process.env.REACT_APP_ENV

You must change all environment variables in your package.json for:
Set NAME_VARIABLE=VALUE
Ex:
"start": "Set REACT_APP_ENV=dev&& npm run start:env",

If you're running on windows, remember to leave no space between the commands and &&.
So the start script will be :
"start-staging":"set REACT_APP_ENV=staging&&react-scripts start"

In script-> start, write cross-env in starting of the value.
After that
Run: npm install.
And you are ready to go

Related

Next.js error cannot find module 'next/headers'

Faced this issue when I was using login functionality developed by my teammate in a group project and apparently I am the only one facing this issue.
npm version: 8.19.3
node version: 16.17.0
package.json :-
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "npm run prettify && next dev",
"build": "npm run prettify && next build",
"start": "next start",
"lint": "npm run prettify && next lint",
"prettify": "prettier --write \"**/*.{js, jsx}\""
},
"dependencies": {
"#emotion/react": "11.10.4",
"#emotion/server": "11.10.0",
"#emotion/styled": "11.10.4",
"#mui/icons-material": "5.10.6",
"#mui/material": "5.10.6",
"#mui/x-date-pickers": "^5.0.3",
"cryptr": "^6.0.3",
"dayjs": "^1.11.5",
"intl": "^1.2.5",
"mui-file-dropzone": "^4.0.2",
"next": "12.2.5",
"next-auth": "^4.12.0",
"normalize.css": "^8.0.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-share": "^4.4.1",
"react-toastify": "^9.0.8",
"swr": "^1.3.0",
"universal-cookie": "^4.0.4"
},
"devDependencies": {
"eslint": "8.23.1",
"eslint-config-next": "12.3.1",
"eslint-config-prettier": "8.5.0",
"prettier": "2.7.1"
}
}
Error :-
error - Error: Cannot find module 'next/headers'
I have tried deleting the node_modules and .next folders but I am still facing this issue.
That is when you update Nextjs to version 13 with next-auth, which is intended for next#13 users, in your case using version 12 yet, the root cause the error in v4.12.x with next/headers package from next#12, so it could be to support getting the session in React Server Components for example.
Edit package.json, it should fix your issue:
{
"next-auth": "4.15.1"
}

npm run: command not found

When I try to run npm run dev or npm run build I get the following error:
npm run dev
> dev
> next
/usr/bin/bash: D:Tempdev-1656515078305.sh: command not found
This is my current package.json:
{
"private": true,
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"type-check": "tsc"
},
"dependencies": {
"bootstrap": "^5.1.3",
"marked": "^4.0.17",
"next": "latest",
"nodemailer": "^6.7.5",
"react": "^18.1.0",
"react-bootstrap": "^2.4.0",
"react-dom": "^18.1.0",
"react-icons": "^4.4.0"
},
"devDependencies": {
"#fullhuman/postcss-purgecss": "^4.1.3",
"#types/node": "^17.0.35",
"#types/react": "^18.0.9",
"#types/react-dom": "^18.0.4",
"#typescript-eslint/eslint-plugin": "^5.30.0",
"#typescript-eslint/parser": "^5.30.0",
"eslint": "^8.18.0",
"eslint-config-standard": "^17.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-n": "^15.2.3",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"postcss-preset-env": "^7.6.0",
"sass": "^1.53.0",
"tailwindcss": "^3.0.24",
"typescript": "4.6"
}
}
I have absolutely no idea why this error occurs.
NodeJS and NPM are installed:
node -v
v16.14.2
npm -v
8.13.1
I've encountered this issue when calling one run-script from another. Using npm-run-all and run-s to launch commands fixed my issues in some scenarios. I suspect that npm is making some assumptions about the shell and path separator based on the 'platform' or not properly introspecting the running shell.

ERR! code E401 npm ERR! Incorrect or missing password

I am trying to do an "npm install" on my project which I have checked out and I have recieved this error :
npm WARN deprecated core-js#2.6.11: core-js#<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code E401
npm ERR! Incorrect or missing password.
npm ERR! If you were trying to login, change your password, create an
npm ERR! authentication token or enable two-factor authentication then
npm ERR! that means you likely typed your password in incorrectly.
I have done a number of things.
removed all .npmrc files on my file system.
logged in as my npm user
deleted package-lock.json
..but i still get the same error.
At the end of the day what I would really like to know is, WHY am I getting this error? Why when I install all my modules does it suddenly want me to log in? Is this from a particular module? What is the reasoning behind this error?
If I "npm install" a random react project I have no problems, so I guess there is something wrong in my package.json. But WHAT module is it?
I am at a complete loss.
My package.json looks like this :
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.28",
"#fortawesome/free-solid-svg-icons": "^5.13.0",
"#fortawesome/react-fontawesome": "^0.1.9",
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.11.2",
"#stripe/react-stripe-js": "^1.1.2",
"#stripe/stripe-js": "^1.5.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/node": "^16.0.1",
"#types/react": "^17.0.14",
"#types/react-dom": "^17.0.9",
"apisauce": "^1.0.1",
"formik": "^2.1.4",
"history": "^4.10.1",
"jwt-decode": "^2.2.0",
"moment": "^2.27.0",
"node-sass": "^4.14.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"react-toastify": "^7.0.4",
"redux": "4.0.1",
"redux-persist": "^6.0.0",
"redux-saga": "^1.1.3",
"typescript": "^4.3.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"test-c": "jest --coverage",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/jest": "^25.2.3",
"#types/jwt-decode": "^3.1.0",
"#types/react-redux": "^7.1.17",
"#types/react-router": "^5.1.16",
"#types/react-router-dom": "^5.1.8",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"flow-bin": "^0.152.0",
"jest-serializer-html": "^7.0.0",
"react-test-renderer": "^16.13.1",
"redux-mock-store": "^1.5.4"
}
}

How to start React App on Development machine as in specific environment?

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)

npm start not working because of Webpack mismatch

I recently copied over a React frontend into the assets folder of my Phoenix backend and also added Webpack.
When I run npm start, I get this error, even when I remove node modules folder and package-lock.json file and run npm install, I get the error again when running npm start.
The react-scripts package provided by Create React App requires a dependency:
"webpack": "4.19.1"
Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:
/Users/danale/Projects/node_modules/webpack (version: 4.29.0)
The error sounds straightforward except that I did a npm ls webpack and I am using the version the error says I should be using:
└─┬ react-scripts#2.0.5
└── webpack#4.19.1
Please point me in the direction I should be looking.
Here is my package.json file:
{
"name": "myproject",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^3.2.1",
"#material-ui/icons": "^3.0.1",
"apollo-boost": "^0.1.23",
"apollo-cache-inmemory": "^1.4.0",
"apollo-link-context": "^1.0.12",
"apollo-link-http": "^1.5.9",
"axios": "^0.18.0",
"classnames": "^2.2.6",
"eslint-config-airbnb": "^17.1.0",
"graphql": "^14.0.2",
"graphql-tag": "^2.10.0",
"jest-dom": "^2.1.0",
"moment": "^2.22.2",
"phoenix": "^1.3.4",
"prop-types": "^15.6.2",
"react": "^16.5.2",
"react-apollo": "^2.3.3",
"react-beautiful-dnd": "^9.0.2",
"react-dom": "^16.5.2",
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "2.0.5",
"react-testing-library": "^5.2.0",
"redux": "^4.0.1",
"redux-saga": "^0.16.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

Resources