Creating New React App and facing issue "Couldn't find binary" - reactjs

I have created new react app using yarn create react-app myapp
and I am able to create the app but, when I am trying to run it. I am getting this issue.
PS C:\Users\MyFolder\Documents\myapp> yarn start
yarn run v1.22.11
warning ..\..\..\..\package.json: No license field
$ react-scripts start error Couldn't find the binary react-scripts start
yarn -version
1.22.11.
Solution Tried
Although, it is a new project still it's not working. I tried changing the scripts in package.json
"start": "node_modules/react-scripts/scripts/start.js start"
OR
"start": "node node_modules/react-scripts/scripts/start.js"
OR
"start": "node_modules/react-scripts/bin/react-scripts.js start"
and then
yarn install
yarn start
Though, nothing worked.
I found this Duplicate Question but I haven't found answer on that post.

Download Visual Studio Code (https://code.visualstudio.com/)
Download node.js (https://nodejs.org/en/)
npx create-react-app "file name"
cd "file name"
npm start
react general file structure is ready :))

Related

Deploy react app from docs in GitHub repository

So, I want to deploy a react app that is inside the docs/ folder. Here is the repository CVNN-PolSAR).
This is not my main app, so I want it to be in another subfolder.
All instructions I find on the internet are the same, add a "homepage" key and
scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
to the package.json and then run npm run deploy
I get the following output:
> cvnn-polsar#0.1.0 predeploy
> npm run build
> cvnn-polsar#0.1.0 build
> react-scripts build
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist#latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist#latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
Compiled with warnings.
src/components/HtmlImgContainer.jsx
Line 12:41: Array.prototype.map() expects a value to be returned at the end of arrow function array-callback-return
Line 13:80: Expected '!==' and instead saw '!=' eqeqeq
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:
52.4 kB build/static/js/main.4bd5577d.js
726 B build/static/css/main.8315cbb6.css
The project was built assuming it is hosted at /CVNN-PolSAR/.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
Find out more about deployment here:
https://cra.link/deployment
> cvnn-polsar#0.1.0 deploy
> gh-pages -d build
Published
I thought the script was due to create a gh-pages branch, but it didn't happen. I tried adding the docs path to the "homepage" string, and it didn't help. Also, at some point, I managed to have the readme.md of the docs file as the website.
What can I do? Is it possible?

new computer but react isnt working as normal

I have a problem, I just got a new computer and I installed node js, git for windows, and visual studio, then I created a react app with the npx create-react-app. command and all seemed fine, but I discovered that I cannot create a development server with the npm run start command, it says the reason is unsupported.
I've tried restarting the computer but nothing works
my console
kind regards
Christian
The problem may be because of the node version you are using is not supported by your machine ( 17+)
Solution -1
Try using node version 16
Uninstall Node.js from the computer.
Download Node.js version 16 and install it again
Same problem is described here
https://github.com/webpack/webpack/issues/14532#issuecomment-947012063
Solution -2
In your package.json: change this line
"start": "react-scripts start"
to
"start": "react-scripts --openssl-legacy-provider start"
Solution -3
Or you can use yarn to create and run react project
Yarn. yarn create react-app my-app. ...
npm start or yarn start. Runs the app in development mode. ...
npm test or yarn test. ...
npm run build or yarn build.
I hope this might solve your problem

Environment Variables in React application

I want to add a .env file in my React application.
The project wasn't created using Create React APP. And without Webpack.
I'm struggling to find a proper solution for this
For a easy solution you could try to use react-app-env.
You could folllow this simple guide. In brief:
install it:
yarn add --dev react-app-env (or npm install --save-dev react-app-env)
change the start and build scripts:
"scripts": {
"start": "react-app-env start'",
"build": "react-app-env build'",
"test": "react-app-env test'",
...
}
finally add at least two configuration files (on project root folder): development.env and production.env. By default development.env is used imported on npm start and npm test, and production.env on npm build.

Error: yarn start - error Command "start" not found

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

Run npm project cloned from git

I want to run npm project, which was cloned from git, on my computer, but usual command like npm start did not work. Can someone give some tutorial how to start such projects or share some information.
Check the readme.md of the git repo for instructions.
But from experience, the cloned project should have a package.json.
In terminal at the root of the project run npm install to install necessary dependencies.
Then check if npm start is set up properly inside the 'Scripts' object in your package.json
Finally run npm start
This should do it for you, but most attention should paid to instructions inside README.md provided by developer.
Inside package.json
edit "start" to this code:
"scripts": {
"start": "react-scripts start",

Resources