npm install error while running docker container - reactjs

I am learning docker and I am getting this error when I run
npm install
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path D:\Docker Practice\section4-react-app/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'D:\Docker Practice\section4-react-
app\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\SIBA\AppData\Local\npm-cache\_logs\2022-04-08T10_01_09_620Z-debug-0.log
This is my package.json file showing all the dependencies
{
"name": "react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I am following mosh tutorial to learn docker.
My task is to run npm install so it automatically installs all the dependencies listed in this project but I am getting above error.
Can someone help me out in this.
I know the versions may be old but it's completly fine as docker will run all the code according to the given dependencies.
So, instead of updated version, I need my application to be build with this version of software and then deploy it to docker container.
Looking forward to hear from you.
Source code is present here
Regards,
Ali

You must run the npm install in the directory where package.json is located, the error clearly states that npm cannot find the package.json:
npm ERR! enoent ENOENT: no such file or directory, open 'D:\Docker
Practice\section4-react- app\package.json' npm ERR!
enoent This is related to npm not being able to find a file.
So it must be some issue with the path.
Though to debug this error, the provided information is not enough:
Open up your terminal or cmd and go to the directory where package.json is located (using the cd command)
run the ls command, it will show all the files present in the directory
take the screenshot of your terminal now and post it here
then run npm install and again take a screenshot of your terminal and post it here.

Related

What build configuration for React on Azure Static Web Apps?

I have seemingly tried everything and see conflicting instructions on deploying a React app (without API) to Azure Static Web Apps even from Microsoft. Has anyone done this successfully?
The latest doc I've used is:
https://learn.microsoft.com/en-gb/azure/static-web-apps/get-started-portal?tabs=react&pivots=github
which is for creating the SWA in the portal though I've used others as well with problems.
I've now arrived at this error:
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! percentage-calculator#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the percentage-calculator#0.1.0 build 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! /github/home/.npm/_logs/2022-07-12T19_38_33_349Z-debug.log
---End of Oryx build logs---
Oryx has failed to build the solution.
Here is my file structure if that matters:
react-app ->src ->components ->index.js,App.js etc..
->public ->index.html etc..
->build (build is gitignored)
->node_modules etc..
My azurestaticwebapps... yml file contains:
app_location: "/"
api_location: ""
output_location: "build"
https://github.com/markhardy/percentage-calculator/runs/7308960687?check_suite_focus=true
Can someone explain what I'm doing wrong? I'm at a loss at this point especially with conflicting instructions from Microsoft.
Seems you have warnings in your code, so the compiler doesn't like it.
Simply change the yml file as below:
under build_and_deploy_job, add:
env:
CI: false
This will stop treating warnings as errors.
Has anyone done this successfully?
We have followed the same document which you have provided and able to build and deploy React static web App from portal without any issues.
Build and Deploy Job:
package.json file:
{
"name": "hello",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"playwright_test": "playwright test",
"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": {
"#playwright/test": "^1.22.2"
}
}
Try to add devDependencies in your package.json file and check once.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#2.3.2 (node_modules/fsevents):
As per this Document, we can add optionalDependencies in your package.json file or can run npm install -f.
Please refer Troubleshooting deployment and runtime errors for Static Web Apps for more information.

Can not resolve project name while creating react app

I am attempting to install React with Typescript, but I keep getting a weird error.
Please note myprojectname is the root repository directory that I am installing the React app into. For some reason it is trying to resolve myprojectname#0.1.0?
Error
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
added 1355 packages in 1m
171 packages are looking for funding
run `npm fund` for details
Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: myprojectname#0.1.0
npm ERR! Found: react#18.0.0
npm ERR! node_modules/react
npm ERR! react#"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"<18.0.0" from #testing-library/react#12.1.5
npm ERR! node_modules/#testing-library/react
npm ERR! #testing-library/react#"^12.0.0" from the root project
My attempts to solve the issue
Clearing then verifying npx cache
Uninstalling create-react-app globally.
Updating npm
Updating node
Running command with and without #latest
Running command with and without --template typescript
Using the --use-npm flag.
Adding --legacy-peer-deps to command.
Modifying command to create the react app in a nested directory.
Command
npx create-react-app#latest . --template typescript --use-npm
Outputs
npm -v > 8.6.0
node -v > v17.8.0
Package.json
{
"name": "myprojectname",
"version": "0.1.0",
"private": true,
"dependencies": {
"cra-template-typescript": "1.1.3",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
The problem was caused by an issue with the testing library installed by default with React. It may have already been fixed.

Error when installing react-router-dom npm install issue

I have node v12.16.2, and npm 7.16.0 running on Mac OS Big Sur 11.5.1.
I just installed a npx react project, with:
npx create-react-app frontend
and this is my package.json file:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
When I try to add:
npm i react-router-dom
I get the following error:
npm WARN tarball tarball data for
hoist-non-react-statics#https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz
(sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==)
seems to be corrupted. Trying again. npm WARN tarball tarball data for
hoist-non-react-statics#https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz
(sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==)
seems to be corrupted. Trying again. npm ERR! code ENOENT npm ERR!
syscall lstat npm ERR! path
/Users/sven/.npm/_cacache/content-v2/sha512/fe/01/a2bf18bc24f296366fd6d234a6cdc30fa5fa4f2dcddd63fe86c615f6850f621a3dda0df925578113ecd8caa528a72e9279bda7daf62886204660d7449f07
npm ERR! errno -2 npm ERR! enoent ENOENT: no such file or directory,
lstat
'/Users/sven/.npm/_cacache/content-v2/sha512/fe/01/a2bf18bc24f296366fd6d234a6cdc30fa5fa4f2dcddd63fe86c615f6850f621a3dda0df925578113ecd8caa528a72e9279bda7daf62886204660d7449f07'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in: npm ERR!
/Users/sven/.npm/_logs/2021-08-02T09_21_43_877Z-debug.log
What could this issue be about: incompatible versions of node or npm for npx create react app?
npm cache clean
npm i react-router-dom --save
I don't know which directory you are running the second command from but you need to be in the project directory (same dir as package.json). cd frontend before the second command.

ReactJs error : npm start not working , I also tied " npm cache clean --force ". I am stuck in the middle of my project

This is the error :
my-app#0.1.0 start /home/gaurav/Desktop/Django + React/Saurav Hardware/saurav_hardware/my-app
react-scripts start
sh: 1: react-scripts: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! my-app#0.1.0 start: `react-scripts start`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the my-app#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR! /home/gaurav/.npm/_logs/2020-05-20T20_38_00_671Z-`enter code here`debug.log
[// This is my package.json]
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-icons": "^3.10.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"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"
]
}
}
This is happening everytime I try to start npm. It was working fine yesterday but it stopped totally.What should I do? What is missing in this package.json file? I also can't be able to install node modules.......!
You haven't installed all of your modules. Run npm install to install the modules specified in package.json and then npm start should work. Note from the error message that react-scripts is not found, which is your clue that the package is not installed

Deploy react application in Git pages using Azure DevOps

I'm trying to deploy my react application (Just a very basic app) in git pages using Azure DevOps. This is to get my hands wet with Azure Devops.
First of all I configured my packag.json as below.
{
"name": "gitpages",
"version": "0.1.0",
"homepage": "https://senal.github.io/gitpage-react",
"private": true,
"dependencies": {
"gh-pages": "^2.0.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"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"
]
}
}
Please pay attention to "homepage" and "deploy" script.
In my Azure DevOps, I have modify the yml file as below.
# Node.js with React
# Build a Node.js project that uses React.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://learn.microsoft.com/azure/devops/pipelines/languages/javascript
trigger:
- master
pool:
vmImage: 'ubuntu-latest'
steps:
- task: NodeTool#0
inputs:
versionSpec: '10.x'
displayName: 'Install Node.js'
- script: |
git config --global user.email "xxxx.yyyy#mymail.com"
git config --global user.name "RSF"
npm install
npm run build
npm run deploy
displayName: 'npm install and build then deploy'
However, when I run the build in DevOps I get the following error:
fatal: could not read Username for 'https://github.com': terminal prompts disabled
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gitpages#0.1.0 deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gitpages#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! /home/vsts/.npm/_logs/2019-06-13T12_03_34_094Z-debug.log
##[error]Bash exited with code '1'.
Please advice what't with my steps/scripts.
Feel free to contact me should you require more info.
UPDATE: I was able to create the page by running
npm run deploy
from my terminal.
What I would like to know is, why we can't do the same thing in DevOps?
Cheers,
RSF
I had the same issue and fixed it by supplying the Github token in the --repo option. Replace npm run deploy with,
npx gh-pages --repo https://$(GITHUB_TOKEN)#github.com/org/repo.git -d dist
and add your token as a pipeline secret.

Resources