Currently working on a project, the project works perfectly fine after npm start and can function normally. However, after any changes made in VS Code, it seems localhost not listening any changes anymore. The workaround is to refresh the browser anytime changes has been made. Does anyone have experienced above issue?
I have tried to remove package-lock.json and node_modules, re-install packages by npm install, nothing helped.
Here is my package.json
{
"name": "crypto-dashboard",
"version": "0.1.0",
"private": true,
"homepage": "https://nickng852.github.io/crypto-dashboard/",
"dependencies": {
"#craco/craco": "^6.3.0",
"#reduxjs/toolkit": "^1.7.1",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"autoprefixer": "^9.8.7",
"axios": "^0.22.0",
"chart.js": "^3.6.0",
"firebase": "^9.1.2",
"html-react-parser": "^1.4.2",
"millify": "^4.0.0",
"moment": "^2.29.1",
"node-sass": "^6.0.1",
"postcss": "^7.0.38",
"react": "^17.0.2",
"react-chartjs-2": "^3.3.0",
"react-click-away-listener": "^2.0.5",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.2.2",
"react-scripts": "4.0.3",
"redux": "^4.1.2",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.16",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject",
"predeploy": "npm run build"
},
"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"
]
}
}
Related
I got this project from repo and cloned it using git clone
then I go to the directory in which I cloned it.
next I went to install the project using NPM install command and these errors occur:-
here is the JSON file
{
"name": "grocery-storeowner-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.4",
"#material-ui/icons": "^4.11.3",
"#material-ui/lab": "^4.0.0-alpha.61",
"#react-pdf/renderer": "^3.0.0",
"#splinetool/react-spline": "^2.2.1",
"#splinetool/runtime": "^0.9.104",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"firebase": "^9.9.4",
"lodash": "^4.17.21",
"react": "^18.2.0",
"react-datepicker": "^4.8.0",
"react-dom": "^18.2.0",
"react-image-file-resizer": "^0.4.8",
"react-image-gallery": "^1.2.9",
"react-modal-image": "^2.5.0",
"react-query": "^3.39.2",
"react-responsive-carousel": "^3.2.23",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-toastify": "^9.0.8",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4"
},
"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"
]
}
}
Any help would be appreciated.
my versions are:-
node.js :- v16.16.0
please change your node version to latest and try once hop it works .it seems you are using outdated node version to your current project.
I am using create react app to make a react project.It is running without any problem on the localhost.However When I try to build it for production.The build takes like 5 minutes and then the build folder returned is completely empty.
I should say this now that the assets folder inside the app is like 50mb .So dont know if thats causing the issue.If anyone has any idea what might be the problem I will appreciate it.
package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:3001",
"dependencies": {
"#amraneze/react-instagram-login": "^3.0.3",
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-brands-svg-icons": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/react-fontawesome": "^0.1.18",
"#mui/material": "^5.6.3",
"#reduxjs/toolkit": "^1.8.1",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.1.1",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"jquery": "^3.6.0",
"puppeteer": "^14.1.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-dropzone": "^14.2.1",
"react-fontawesome": "^1.7.1",
"react-google-login": "^5.2.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-slick": "^0.29.0",
"redux": "^4.1.2",
"slick-carousel": "^1.8.1",
"web-vitals": "^2.1.4"
},
"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"
]
}
}
Up to 2 days ago I could install all dependencies of my project without any problem, but since today I am getting this ssh error:
-h -t ssh://git#github.com/ethereumjs/ethereumjs-abi.git
but the thing is that I do not have ethereumjs installed.
Here is my package.json
{
"name": "husky-farm",
"version": "0.1.0",
"private": true,
"dependencies": {
"#ethersproject/providers": "^5.4.1",
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.60",
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"#walletconnect/web3-provider": "^1.4.1",
"#web3-react/core": "^6.1.9",
"#web3-react/injected-connector": "^6.0.7",
"flag-icon-css": "^3.5.0",
"i18next": "^20.3.1",
"i18next-browser-languagedetector": "^6.1.1",
"i18next-http-backend": "^1.2.6",
"npm": "^7.19.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^11.10.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-stepper-horizontal": "^1.0.11",
"web-vitals": "^1.1.2",
"web3": "^1.3.6"
},
"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"
]
},
"devDependencies": {
"bignumber.js": "^9.0.1",
"dotenv-cli": "^4.0.0",
"eslint": "^7.30.0",
"eslint-plugin-react": "^7.24.0",
"ethers": "^5.4.1"
}
}
Any idea why all of sudden it asks me an ssh key?
Check first, as mentioned in the comments of this question, if updating node and npm to the latest version.
As seen in smartcontractkit/truffle-starter-kit issue 96, consider also using yarn, to test if this is more reliable than npm in your case.
How can I build my project so I can put it wherever I want? For example, I would love to see it on, if it's possible, XAMPP?
Whenever I build my react app, index.html is empty.
Here is the whole project on GitHub: https://github.com/slabys/reacty.git
Whenever I use npm run build, my folder build is created with all the content:
index.html from build: https://pastebin.com/WSyAvrwu
package.json
{
"name": "my_react",
"version": "0.1.0",
"private": true,
"dependencies": {
"#stardust-ui/docs-components": "^0.40.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"bootstrap": "^4.5.0",
"browser-sync": "^2.26.7",
"del": "^5.1.0",
"express": "^4.17.1",
"express-favicon": "^2.0.1",
"gulp-autoprefixer": "^7.0.1",
"gulp-concat": "^2.6.1",
"gulp-copy": "^4.0.1",
"gulp-data": "^1.3.1",
"gulp-plumber": "^1.2.1",
"gulp-sourcemaps": "^2.6.5",
"gulp-twig": "^1.2.0",
"prettier": "^1.4.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"react-sidebar": "^3.0.2"
},
"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"
]
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"main": "index.js",
"devDependencies": {
"#craco/craco": "^5.6.4",
"#semantic-ui-react/craco-less": "^1.2.1",
"gulp": "^4.0.2",
"gulp-sass": "^4.1.0",
"node-sass": "^4.14.1",
"semantic-ui-less": "^2.4.1"
},
"author": "slabys",
"license": "ISC",
"repository": {
"type": "git",
"url": "react"
},
"optionalDependencies": {}
}
Problem solved!
All works fine. Just when I have this projects build in XAMPP htdocs, I put in into a folder. So after moving files from folder directly under localhost EVERYTHING started to work.
<Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse} breakpoint="md">
<Menu
theme="dark"
mode="inline"
defaultSelectedKeys={['10']}
style={{ lineHeight: '64px' }}
>
<Menu.Item key="2" icon={<LoginOutlined />}><Link to="/login">Login</Link></Menu.Item>
This is what my Sider code looks like. But still, the icon doesn't show on the Sider. This code works perfectly on CodeSandBox. Using the latest version of Chrome.
Even the collapsed form doesn't show icons.
Please help.
Edits:
1. CodeSandbox Link: https://codesandbox.io/s/sider-ant-design-demo-zkpcs?fontsize=14&hidenavigation=1&theme=dark
2. package.json:
{
"name": "gui",
"version": "0.1.0",
"private": true,
"homepage": "https://exampple.com/",
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"antd": "^4.1.4",
"axios": "^0.19.2",
"babel-plugin-import": "^1.13.0",
"customize-cra": "^0.9.1",
"dayjs": "^1.8.23",
"dotenv": "^8.2.0",
"eslint": "^6.8.0",
"eslint-plugin-flowtype": "^4.6.0",
"gh-pages": "^2.2.0",
"less": "^3.11.1",
"less-loader": "^5.0.0",
"react": "^16.13.1",
"react-app-rewired": "^2.1.6",
"react-dom": "^16.13.1",
"react-ga": "^2.7.0",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"tsutil": "^6.1.1",
"typescript": "^3.8.3"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "netlify deploy",
"deployprod": "netlify deploy --prod",
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject",
"postinstall": "npm run build"
},
"engines": {
"node": "13.7.0",
"npm": "6.13.6"
},
"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"
]
}
}
All I had to do to fix it was update from "antd" version 4.0.0 to the latest version 4.6.3