I am starting to learn react. And following the tutorials, the first thing I do is create a react app using 'create-react-app'.
Though, it gave me a few high-severity vulnerabilities pasted below-
Creating a new React app in /Users/girishtiwale/Dropbox/#Girish/My_Workspace/react_practice/new-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
added 1393 packages in 31s
203 packages are looking for funding
run `npm fund` for details
npm notice
npm notice New patch version of npm available! 8.15.0 -> 8.15.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.15.1
npm notice Run npm install -g npm#8.15.1 to update!
npm notice
Initialized a git repository.
Installing template dependencies using npm...
npm WARN deprecated source-map-resolve#0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
added 52 packages in 4s
203 packages are looking for funding
run `npm fund` for details
npm notice
npm notice New patch version of npm available! 8.15.0 -> 8.15.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.15.1
npm notice Run npm install -g npm#8.15.1 to update!
npm notice
Removing template package using npm...
removed 1 package, and audited 1445 packages in 1s
203 packages are looking for funding
run `npm fund` for details
6 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
npm notice
npm notice New patch version of npm available! 8.15.0 -> 8.15.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.15.1
npm notice Run npm install -g npm#8.15.1 to update!
npm notice
Created git commit.
Success! Created new-app at /Users/girishtiwale/Dropbox/#Girish/My_Workspace/react_practice/new-app
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd new-app
npm start
Happy hacking!
npm notice
npm notice New patch version of npm available! 8.15.0 -> 8.15.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.15.1
npm notice Run npm install -g npm#8.15.1 to update!
npm notice
But when I don 'npm start', the console displays 'Starting the development server ...', it opens a browser tab with localhost:3000 automatically, and then nothing happens...
Here is a Screenshot
wait till the end of process started. Take some time. Two ways could be later - error or happy start. In case of error share the error first. Check the console
Are you using npx create-react-app <name-of-your-app> to create the app?
If so maybe use npm run start to start your application it should be located in your package.json section example is:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "NODE_ENV=production node server.js",
"lint": "next lint"
},
so in this case you would run npm run "dev" as npm run dev
Maybe you forgot to go inside the folder before 'npm start'.
As it says, you have to:
cd new-app
npm start
can you tell us what is written in your scripts in package.json
this should be something like this
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
and what is your node version?
Ok, remove your node module and install it again with npm install
then try again if this didn't work first add npm build then npm install
have you tried running "npm dev" before "npm start"?
also you can try running "npm start -p 3030" to run it on a different localhost server.
I recognize that there are several questions out there with a similar/same issue, but I have not been able to find a working solution from those posts yet. When running git push heroku master, the build runs for a while, then crashes with the following error:
> client#0.1.0 build /tmp/build_f22760141a320d80dbbda0a359da5e4b/client
> react-scripts build
/tmp/build_f22760141a320d80dbbda0a359da5e4b/client/node_modules/#hapi/hoek/lib/deep-equal.js:17
options = { prototype: true, ...options };
^^^
SyntaxError: Unexpected token ...
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:513:28)
(it goes on for a bit more)
npm ERR! Linux 4.4.0-1048-aws
npm ERR! argv "/tmp/build_f22760141a320d80dbbda0a359da5e4b/.heroku/node/bin/node" "/tmp/build_f22760141a320d80dbbda0a359da5e4b/.heroku/node/bin/npm" "run" "build"
npm ERR! node v6.3.1
npm ERR! npm v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! client#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the client#0.1.0 build script 'react-scripts build'.
There is more to it above and below, but I believe that is the relevant portion. My suspicion from reading this and other errors is that my package.json file is not set up correctly. Here is what I hope are the helpful portions to see:
// root package.json:
...
"engines": {
"node": ">= 6.9.4",
"npm": ">= 4.4.0"
},
"scripts": {
"start": "react-scripts start",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cd client && npm install && npm run build && cd ..",
"deploy": "cp -a client/build/. public/",
"postinstall": "npm run build && npm run deploy && echo 'Client built!'"
},
...
// and /client/package.json:
...javascript
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...
I was following this article while structuring my app, and it all went well until the deploy to Heroku.
Here are some other potentially useful things to note:
// Profile
web: bundle exec rails s
// Heroku buildpacks:
1. heroku/nodejs
2. heroku/ruby
// Node and npm are both updated
This is my first question on here, so I am sorry if there is insufficient or unnecessary information. Any help on where to look to fix this would be greatly appreciated. Thank you!
Well, it is working now, and all I did was:
git add .
git commit -m "Working on setting up Heroku. It's not working"
git push origin master
Then when I ran git push heroku master, it built! My guess is that Heroku was watching for changes to my master branch, and all the work I did reading other people's posts was never pushed to master. Very much a guess on that though.
I am trying to deploy my react app to the GitHub pages but I have encountered the following error:
The build folder is ready to be deployed.
To publish it at https://jatinkumarg.github.io/personal-portfolio, run:
npm run deploy
> personal-portfolio#0.1.0 deploy C:\react-projects\personal-portfolio
> gh-pages -d build
Cloning into 'node_modules\gh-pages\.cache\git#github.com!jatinkumarg!personal-portfolio.git'...
git#github.com: Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! personal-portfolio#0.1.0 deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the personal-portfolio#0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\jatin\AppData\Roaming\npm-cache\_logs\2019-07-23T04_40_54_788Z-debug.log
I have already set-up and tested my ssh key, it works fine.
There is only one remote url i.e. origin(SSH)
This is my package.json
{
"name": "personal-portfolio",
"version": "0.1.0",
"homepage": "https://jatinkumarg.github.io/personal-portfolio",
"dependencies": {
"jquery": "^3.4.1",
"json-loader": "^0.5.7",
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"gh-pages": "^1.0.0",
"react-scripts": "1.0.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"
}
}
At this point, I have no idea what's wrong. Can anyone please help me with this issue?
You need the PRO plan to use GitHub pages on a private repository.
You can try adding a SSH identity in ~/.ssh/config
Host github.com
HostName github.com
User git
IdentityFile /Users/myusername/.ssh/my_github_ssh_private_key_registered_on_github
it didnt help me, but here is my solution:
git remote set-url origin https://github.com/USERNAME/REPOSITORY_NAME.git
You will recieve smtn like this:
npm run deploy
> ravenous#0.1.0 predeploy C:\Users\peter\ravenous
> npm run build
> ravenous#0.1.0 build C:\Users\peter\ravenous
> react-scripts build
Creating an optimized production build...
Compiled with warnings.
./src/components/SearchBar/SearchBar.js
Line 84:21: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
./src/components/Business/Business.js
Line 9:55: Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener react/jsx-no-target-blank
Line 17:21: Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener react/jsx-no-target-blank
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
File sizes after gzip:
40.23 KB build\static\js\2.c4f174a4.chunk.js
1.76 KB build\static\js\main.f787394e.chunk.js
1.08 KB build\static\css\main.551e99bf.chunk.css
783 B build\static\js\runtime-main.647a42cc.js
The project was built assuming it is hosted at /personalportfolio/.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
To publish it at http://PetrMitin.github.io/personalportfolio , run:
npm run deploy
Find out more about deployment here:
bit.ly/CRA-deploy
> ravenous#0.1.0 deploy C:\Users\peter\ravenous
> gh-pages -d build
*** Please tell me who you are.
Run
git config --global user.email "you#example.com"
git config --global user.name "Your Name"
to set your account's default identity.
Omit --global to set the identity only in this repository.
fatal: unable to auto-detect email address (got 'peter#LAPTOP-FRARNQJG.(none)')
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ravenous#0.1.0 deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ravenous#0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\peter\AppData\Roaming\npm-cache\_logs\2020-01-07T23_02_19_256Z-debug.log
If you did, you are on the right way!
Then pass required info by entering in cmd or whatever:
git config --global user.email "you#example.com"
git config --global user.name "Your Name"
And try to run:
npm run deploy
I believe that i`ve helped you to resolve your question.
I am trying to learn React and I am using a private repo to start with it.
I run yarn start in the directory of the repo but I get the error message:
yarn run v1.13.0
error Command "start" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I have both node and yarn installed.
For node:
v10.15.0
node is /usr/local/bin/node
For yarn:
1.13.0
yarn is /usr/local/bin/yarn
I tried to reinstall both node and yarn but I get the same error message. moreover I tried to remove the yarn chance via yarn cache clean but nothing seems to work.
The package.json contains the following:
{
"name": "02-Manipulating-Strings",
"version": "1.0.0",
"author": "ssaunier",
"license": "UNLICENSED",
"private": true,
"devDependencies": {
"eslint": "^4.7.2",
"eslint-config-airbnb-base": "^12.0.0",
"eslint-plugin-import": "^2.7.0",
"jest": "^21.1.0"
},
"scripts": {
"test": "(eslint lib || true) && jest"
}
}
The directory is organised in the following way:
There is no start command inside the scripts of the package.json file.
"scripts": {
"start": "some command to be run", // you need to add this line
"test": "(eslint lib || true) && jest"
}
Maybe you want to run the test command instead - npm test / yarn test?
Just run
yarn add react-scripts
Solved it thanks to the insight of the user: Tsvetan Ganev.
I was trying to run a command that it is not in my scripts. Specifically, yarn start is not in the scripts part of the file package.json.
To solve the issue I added the following line in scripts
"start": "webpack-dev-server --mode development",
I got the same error message "start" command not found. My issue got resolved by following the below mentioned steps.
-open the folder in which you want to create the app using terminal then type these commands:
npm uninstall -g create-react-app
npx create-react-app FolderName
(This will automatically install the latest create-react-app version)
-Then run the command yarn start and it will work.
I had this problem. I figured the best way is this.
npm i -g create-react-app
create-react-app my-react-app //or whatever you want your project to be
cd my-react-app
yarn start
You can also try to run first npm install and then npm run or first yarn and then yarn start
I had the same issue start command not found.
I followed below instruction to recreate react app
. Go to your parent folder in cmd
. Type yarn add create-react-app
. And yarn create-react-app FolderName
After installing yarn start will work.
Well, I was getting this error cause I was dumb Not going inside the main project folder.so it actually not able to find .json file too😁
Adding this to package.json worked for me
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},"devDependencies": {
"babel-preset-expo": "^7.0.0"
},
If you are using create-react-app and encountered this error, chances are you did not install create-react-app successfully.
Try removing globally installed create-create-app as explained below.
Template not provided using create-react-app
check your package.json that has "start" scripts.
if you just have dependency list, make sure you have the following on the package.jons
"devDependencies": {
"#theia/cli": "next"
},
"scripts": {
"prepare": "yarn run clean && yarn build && yarn run download:plugins",
"clean": "theia clean",
"build": "theia build --mode development",
"start": "theia start --plugins=local-dir:plugins",
"download:plugins": "theia download:plugins"
},
"theiaPluginsDir": "plugins",
"theiaPlugins": {
"vscode-builtin-css": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/css-1.39.1-prel.vsix",
"vscode-builtin-html": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/html-1.39.1-prel.vsix",
"vscode-builtin-javascript": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/javascript-1.39.1-prel.vsix",
"vscode-builtin-json": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/json-1.39.1-prel.vsix",
"vscode-builtin-markdown": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/markdown-1.39.1-prel.vsix",
"vscode-builtin-npm": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/npm-1.39.1-prel.vsix",
"vscode-builtin-scss": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/scss-1.39.1-prel.vsix",
"vscode-builtin-typescript": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/typescript-1.39.1-prel.vsix",
"vscode-builtin-typescript-language-features": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/typescript-language-features-1.39.1-prel.vsix"
}
}
otherwise run this on the folder where package.json is
error Command "start" not found.
yarn run theia start /home --hostname 0.0.0.0 --port 8080
theia should start on port 8080 minimally.
If you get error Command "start" not found. after creating new project using create-react-app you most probably would have created the app using npm.
To do it correctly delete the directory of the project and recreate the project using yarn with the following command
yarn create react-app my-app
After that yarn start works perfectly fine.
i got the same issue. it cusses you have installed packages in wrong directory.
in cmd terminal:-(D:\PROJECT)=> my cmd file path shows
D:\PROJECTS\npx create-react-app app-react
(when you enter this command it will create new file named app-react . then you have to go into the app-react file . use this command to go to the that file "cd app-react" then enter. you will see cmd path )
D:\PROJECTS\cd app-react
D:\PROJECTS\app-react\
then install other yarn packges
D:\PROJECTS\app-react\yarn add #chakra-ui/react #emotion/react#^11 #emotion/styled#^11 framer-motion#^4
D:\PROJECTS\app-react\yarn add react-icons
D:\PROJECTS\app-react\yarn add react-router-dom
then yarn start
D:\PROJECTS\app-react\yarn start
if it is won't open check yarn package installed using this command
D:\PROJECTS\app-react\yarn -version
1.22.10
for install yarn
npm install --global yarn
just run following commands:
npm uninstall -g create-react-app
npx create-react-app FolderName
I had a similar problem while I have "start" script in my package.json. Eventually, I figured out that I had not saved the package.json, so I got this error. Obviously, after saving the package.json the problem was resolved.
This issue happens when file "package.json" will gets deleted or changed. Please check your
"package.json" file.
It may sound silly, but I was having this same problem and all I did was close the program (vscode), and reopen it. I made sure it was inside the correct project folder (web) and did the process again. It worked. In my case it was just a lack of attention.
I hope your problem is as simple as mine.
Hug!
i solve the problem whit this:
Since create-react-app 3.3.0 it's not longer recommended to use a global installation of CRA.
However, after following the recommended way, uninstalling CRA globally and using npm,I ran into the following problem for my new React project:
A template was not provided. This is likely because you're using an outdated version of create-react-app.
It seems like CRA wasn't properly uninstalled. I had to do the following:
After uninstalling it with npm uninstall -g create-react-app, check whether you still have it "installed" with which create-react-app on your command line. If it returns something (e.g. /usr/local/bin/create-react-app), then do a rm -rf /usr/local/bin/create-react-app to delete manually.
Afterward, I was able to use npx create-react-app my-app with the latest version of CRA where I would have the default template for the src/ folder
Nov 2020
This might happen when you clone a git repo created with an older version of create-react-app or event with another setup.
First install react-scripts as
yarn add react-scripts
Or
npm install react-scripts
Then if having problem with react-scripts, refer to this SO thread.
Firstly, you can try
npm install
then
You can also try to run first npm install and then npm run or first yarn and then yarn start
I have solved my issues with the following command. Try this command, hope you will get rid of the problems.
npm run start
I also face this error but in my case I think, I have done all the above steps but the error still remaining the last thing I did in my main node_module/.bin/ folder I saw there are two dependencies one is create-react-app it fine but another one is creat-app-react so I deleted this dependency and also remove from my package.json file.
So now yarn start is working perfectly.
just run command
corepack disable
if you ran the following command before
corepack enable
I was outside the project. So I type cd myProject and than yarn run
{
test: /\.scss$/,
include: [/vue-components|views/],
use: [
'vue-style-loader',
'css-loader',
'sass-loader',
],
},
put this in webpack.config.js in module object.
one of the reasons behind this is watch if you are in the right directory type cd your_file_name then type npm run dev
I had the same issue. Just run
npm install --global yarn
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject" },
I found that when I added this into the scripts section package.json dependency; it worked! This way, you'll get the https://localhost:3000 instead of using the 8080 port.
I had this problem and just solved it! Super easy, I hope it helps you:
The problem: "node_modules" was duplicated. You may have accidentally downloaded a duplicated "node_modules" folder when calling yar originally.
Go to "User/#yourname/node_modules" and delete the folder.
just start the app via debug option
enter image description here
Can Anyone help me out that how can i deploy my react app on github. I have added all required dependecny in my package.json file with using of updated react modules.
Below is my package.json file :
{
"name": "git-sample-react",
"version": "0.1.0",
"private": true,
"homepage": "https://ababsheck.github.io/first-react-sample/",
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "1.1.4"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"deploy": "gh-pages -b master -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"gh-pages": "^1.2.0"
}
}
npm run deploy issue : github
Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option).
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! git-sample-react#0.1.0 deploy: `gh-pages -b master -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the git-sample-react#0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\abhis\AppData\Roaming\npm-cache\_logs\2018-08-07T12_21_21_735Z-debug.log
I had the same issue, deploying react app in GitHub and resolved this issues with the following steeps:
Run the command in project folder git remote add origin <url>, with the URL of your repository on GitHub.
Run the command npm install --save-dev gh-pages.
Run the npm run build.
Run the command npm run deploy.
Change the branch in GitHub where you deploy see the image below. Under Source must be gh-pages branch.
I also have added the "homepage": "https://ababsheck.github.io/first-react-sample/",
before the script like:
"homepage": "https://ababsheck.github.io/first-react-sample/",
"scripts": {
"predeploy": "npm run build",
...// the rest of the code
Best approach
git init
git remote add origin <repo_link>
yarn add gh-pages
yarn build
yarn deploy
Now go to your Github and update the
Settings-->Github Pages-->source (change to gh-pages branch)-->root-->Save
and then check the link/homepage generated.