<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
Related
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.
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"
]
}
}
I am trying to deploy my react app using gh-pages, and after upload it I found white page. I tried many solutions but nothing work.
this is the url :
https://mosherad.github.io/spreago-react/
and here is the json file
{
"name": "spreago",
"version": "0.1.0",
"private": true,
"dependencies": {
"#apollo/react-hooks": "^3.1.3",
"#hapi/hawk": "^7.1.2",
"#material-ui/core": "^4.8.0",
"#material-ui/icons": "^4.5.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"apollo-boost": "^0.4.7",
"bootstrap": "^4.4.1",
"gh-pages": "^2.2.0",
"graphql": "^14.5.8",
"history": "^4.10.1",
"lodash.flowright": "^3.5.0",
"react": "^16.12.0",
"react-apollo": "^3.1.3",
"react-bootstrap": "^1.0.0-beta.16",
"react-dom": "^16.12.0",
"react-icons": "^3.8.0",
"react-material-ui-form-validator": "^2.0.9",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"serve": "^11.3.0",
"yarn": "^1.21.1",
"yarn-install": "^1.0.0"
},
"homepage": "https://mosherad.github.io/spreago-react/",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"predeploy": "npm run build",
"deploy": "gh-pages -d 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"
]
},
"devDependencies": {
"eslint": "^6.7.2"
}
}