npm run build makes build/, complains it already exists - reactjs

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"
]
}
}

Related

Why is my react/next project not compiling?

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.

localhost not working after save in VS Code

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"
]
}
}

glob-parent\index.js'. Please verify that the package.json has a valid "main" entry [0] in react project

My project used to run perfectly, I dont know what happened , i started to get this error when i run the frontend
"glob-parent\index.js'. Please verify that the package.json has a
valid "main" entry [0] in react project"
this is the top of my package.json
{
"name": "#minimal/minimal-kit-react",
"author": "minimals.cc",
"version": "3.0.0",
"description": "Javascript Version",
"proxy": "http://localhost:5000",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject",
"lint": "eslint --ext .js,.jsx ./src",
"lint:fix": "eslint --fix --ext .js,.jsx ./src"
},
"eslintConfig": {
"extends": [
"react-app"
]
},
"babel": {
"presets": [
"#babel/preset-react"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"dependencies": {
"#auth0/auth0-spa-js": "^1.19.3",
"#emotion/cache": "^11.7.1",
"#emotion/react": "^11.7.1",
"react-dom": "^17.0.2",
"react-helmet-async": "^1.2.2",
"react-hook-form": "^7.22.2",
"react-redux": "^7.2.6",
"react-router": "^6.2.1",
"react-router-dom": "^6.2.1",
"react-scripts": "^4.0.3",
"react-toastify": "^8.2.0",
"redux": "^4.1.2",
"redux-persist": "^6.0.0",
},
"devDependencies": {
"#babel/core": "^7.16.0",
"#babel/eslint-parser": "^7.16.3",
"#typescript-eslint/eslint-plugin": "^5.5.0",
"#typescript-eslint/parser": "^5.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^7.32.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^8.0.3",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.27.1",
"eslint-plugin-react-hooks": "^4.3.0",
}
}
I have tried:
deleting node_modules
deleting package-lock-json
yarn install
but in vain, and also m:
deleted the project
cloned again
It's important to note that the project runs perfectly on my teammates' PCs, the problem is definitely with mine

Strangely no NODE_MODULES folder is created running npm install and there is no warnings

I learn React and reading lots of code and now I try this GitHub quarentineBoredom.
It looks all normal nothing strange in package.json or other special files but when I run
npm install in the dir where package.json is in no node_modules folder is created.
I read many posts about this and cant find a solution and I really like to try this app please advice?
packages.json
{
"name": "quarentine-boredom",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"lint": "eslint .",
"eject": "react-scripts eject"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.27",
"#fortawesome/pro-duotone-svg-icons": "^5.12.1",
"#fortawesome/pro-regular-svg-icons": "^5.12.1",
"#fortawesome/react-fontawesome": "^0.1.9",
"big-human-readable-ids": "^2.0.1",
"d3": "^5.15.0",
"firebase": "^7.12.0",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"recompose": "^0.30.0"
},
"devDependencies": {
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.19.0",
"prettier": "^2.0.1"
},
"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"
]
}
}
Terminal Output:
When you do npm install do you see any errors? It's likely that there's an issue with one (or more) of the packages, and/or your npm version is out of date.

Why are the icons not showing up on my Ant Design sider?

<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

Resources