I am facing trouble compiling my react/next project which I am trying to run using VScode. After 'npm start', whenever I try to make any changes, it just freezes, doesn't compile and not reflecting to the dashboard. The same project is running for my teammates. So I believe this doesn't concern with the code but my system itself.
Below are my system config:
MacOS Monterey (Apple M2)
tried Node Version v14.15.1, v14.17.0, v14.21.3, v16.19.1, v19.6.1
deleted and re-installed node_modules
What else can be the reason? Let me know if you need any other details.
Below is my package.json file
{
"name": "eflexjobs",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.3",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.56",
"#material-ui/styles": "^4.11.3",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.8.1",
"axios": "^0.21.1",
"eslint": "^8.6.0",
"formik": "^2.2.6",
"globby": "^12.0.2",
"html-react-parser": "^1.4.9",
"lite-youtube-embed": "^0.2.0",
"moment": "^2.29.1",
"netlify-cms-app": "^2.15.59",
"next": "^11.1.3",
"next-seo": "^5.1.0",
"next-sitemap": "^1.6.203",
"prettier": "^2.5.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-facebook-pixel": "^1.0.4",
"react-gtm-module": "^2.0.11",
"react-lite-youtube-embed": "^2.1.3",
"react-loader": "^2.4.7",
"react-loader-spinner": "^4.0.0",
"react-markdown": "^4.2.2",
"react-player": "^2.9.0",
"react-slick": "^0.28.1",
"react-spinners": "^0.12.0",
"react-toastify": "^7.0.4",
"reactjs-freshchat": "^1.3.2",
"sass": "^1.41.1",
"sass-loader": "^12.1.0",
"slick-carousel": "^1.8.1",
"styled-components": "^5.3.3",
"swiper": "^6.8.1",
"typeface-raleway": "0.0.75",
"use-debounce": "^6.0.1",
"web-vitals": "^1.1.0",
"window-or-global": "^1.0.1",
"yup": "^0.32.9"
},
"scripts": {
"dev": "next dev",
"build": "node public/main.js && next build",
"postbuild": "next-sitemap",
"start": "next start",
"test": "react-scripts test",
"eject": "react-scripts eject",
"server": "node public/main.js"
},
"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": {}
}
There Should be Many reasons like:
1.Dependencies
2.Configuration issues.
3.Version incompatibility.
4.Network issues
If it is a next.js project, it is run by default using npm run dev or yarn dev command.
If you have any issues, please share the package.json file.
Turns out that the auto-save mode was not on. I had to save it after every change. And now it's working.
Related
I'm getting following errors if npm install
i tried clean cache also like this
if i directly run the project it's shows react it shows
"'react-scripts' is not recognized as an internal or external command"
this is the package.json code used in my project i'm not getting what's the issue bcoz i'm new to react.let me know how to run the project.. thanks in advance..
{
"name": "pay-management",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/core": "^11.0.0",
"#emotion/react": "^11.1.5",
"#fortawesome/fontawesome-svg-core": "^1.2.34",
"#fortawesome/free-brands-svg-icons": "^5.15.2",
"#fortawesome/free-solid-svg-icons": "^5.15.2",
"#fortawesome/react-fontawesome": "^0.1.14",
"#material-ui/core": "^4.11.1",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.57",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"autoprefixer": "7",
"change-case": "^4.1.1",
"lodash": "^4.17.21",
"material-ui": "^0.20.2",
"material-ui-bootstrap": "^2.0.0",
"moment": "^2.29.1",
"postcss": "7",
"postcss-flexbugs-fixes": "4",
"postcss-preset-env": "^6.7.0",
"react": "^17.0.1",
"react-beautiful-dnd": "^13.0.0",
"react-csv-importer": "^0.3.0",
"react-dom": "^17.0.1",
"react-dropzone": "^11.2.4",
"react-moment": "^1.1.1",
"react-number-format": "^4.4.4",
"react-papaparse": "^3.11.1",
"react-resize-observer": "^1.1.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"react-table": "^7.6.2",
"react-timer-mixin": "^0.13.4",
"web-vitals": "^0.2.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"
]
},
"globals": {
"_": true
},
"homepage": "url",
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#tailwindcssinjs/macro": "^0.17.0",
"cross-env": "^7.0.2",
"tailwindcss": "^2.0.1-compat"
},
"main": "index.js",
"author": "",
"license": "ISC"
}
The error message you're seeing trying to run build makes sense. You can't run your build script if you haven't installed the dependencies first - since you don't have the libraries necessary to compile the project yet! npm run build is a synonym for "react-scripts build" according to your package.json file, so you need react (which is part of your dependency list). You have to solve the dependency conflicts first - then you can run build.
The npm dependecy conflict message tells you the steps to follow in order to solve them, read them and follow those. AFTER trying those official steps, if they don't help, as the last resort I would try upgrading manually autoprefixer to be v 10.0.2 ~it appears you installed it manually while developing without knowing tailwind was going to use it internally.
Hope that helps.
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"
]
}
}
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"
]
}
}
I'm building an ASP.NET Core app with React in Visual Studio. When I run npm run build, I get the following error:
Creating an optimized production build...
Failed to compile.
EEXIST: file already exists, mkdir 'G:\My Drive\[redacted]\ClientApp]\build\static\js'
I've deleted the build folder and run again, but it creates it and then complains again that it already exists.
Here's my package.json:
"name": "partssearchtool",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#mui/icons-material": "^5.3.1",
"#mui/material": "^5.4.0",
"bootstrap": "^4.1.3",
"chart.js": "^3.6.0",
"jquery": "^3.4.1",
"merge": "^1.2.1",
"oidc-client": "^1.9.0",
"react": "^17.0.2",
"react-chartjs-2": "^4.0.0",
"react-dom": "17.0.2",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.4.1",
"reactstrap": "^8.4.1",
"recharts": "^2.1.6",
"rimraf": "^2.6.2",
"synp": "^1.9.9"
},
"devDependencies": {
"ajv": "^6.9.1",
"cross-env": "^5.2.0",
"eslint": "^6.8.0",
"eslint-config-react-app": "^5.2.0",
"eslint-plugin-flowtype": "^4.6.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.18.3",
"nan": "^2.14.1",
"typescript": "^3.7.5"
},
"eslintConfig": {
"extends": "react-app"
},
"scripts": {
"start": "rimraf ./build && react-scripts start",
"build": "react-scripts build",
"test": "cross-env CI=true react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint ./src/"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
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.