How to solve npm missing script: Build and host my react application? - reactjs

I am trying to host my react application with Netlify but when I run npm run build I have this error
npm ERR! missing script: build
This is my package.json file
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000",
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
How can I solve it ?

When Netlify runs npm, it is unable to find the run command in your package.json, most likely because it is in the wrong directory.
Your package.json needs to be in the Base directory in your Netlify config.

Related

React Project | "ENOENT: no such file or directory..." when running npm run build

Not sure what's happening when I'm getting this message. I made sure to install things appropriately in my package.json file and installing everything correctly. Is there something else I'm missing?
{
"homepage": "https://xxxxxx.github.io/coffee-subscription-site",
"name": "vite-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"build": "vite build",
"preview": "vite preview"
},

How to configure package.json for a package to use the latest version?

I want to install a package with the latest version whenever I run npm install without specifying a version. e.g. react-datepicker in the following file.
{
"name": "example",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.13.1",
"react-datepicker": "^2.15.0",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}
Should I update the version every time when "react-datepicker" releases a new version?

Could start my react application using npm start

I have created the react application using npx create-react-app task-tracker and this is my package.json file when ever I run npm start it shows error. As I am new to React I hardly have any knowledge about it.
this the error:
npm ERR! missing script: start
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ASUS\AppData\Roaming\npm-cache\_logs\2021-04-19T15_13_05_651Z-debug.log
package.json:
{
"name": "task-tracker",
"version": "0.1.0",
"private": true,
"dependencies": {
"cra-template": "1.1.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-scripts": "4.0.3"
}
}
It seems like create-react-app did not add the "scripts" field to the package.json object. I would try adding this field to package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
If that doesn't work, try running create-react-app again

'react' - After run npm start it gives ./src/index.js Module not found: Can't resolve 'react' in 'C:\Users\...\src' error

In reactJs after run
npm start
it gives
./src/index.js Module not found: Can't resolve 'react' in
'C:\Users...\src'
error.
this is my package.js
{
"name": "client-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#aspnet/signalr": "^1.0.4",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-scripts": "^1.1.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Try removing package-lock.json, run npm install and then run npm start again.

github pages displaying readme, not index.js

I have a basic React app. No backend. I want to set it up on github pages. I followed this article, twice. https://medium.freecodecamp.org/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089
Both times, Github Pages displays the README.md file instead of the index.html file in my public folder. Here is an image of the file directory for the app. Any thoughts?
Here is what I have in package.json if it matters:
{
"name": "react-blog",
"version": "0.1.0",
"private": true,
"homepage": "https://jackseabolt.github.io/react-blog/",
"dependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-scripts": "1.0.14"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy" : "npm run build&&gh-pages -d build"
},
"devDependencies": {
"gh-pages": "^1.0.0"
}
}
Your issue is likely that you are using your master branch as the source. In the settings tab on your Github project page, change the source to use the gh-pages branch.
See https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#step-4-ensure-your-projects-settings-use-gh-pages

Resources