I have checked on my node module, FontIcon folder not present, its missing, I have tried many thinks but problem not resolved, Please help me.
My package.json file:
{
"name": "flipshop",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"material-ui": "^1.0.0-beta.40",
"react": "^16.2.0",
"react-bootstrap": "^0.32.1",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"file-loader": "^1.1.11"
}
}
FontIcon is not an export in material-ui version 1.0.0-beta.40, you need to make use of Icons
To use FontIcons, include
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
in your project and then
To use an icon simply wrap the icon name (font ligature) with the Icon component, for example:
import Icon from 'material-ui/Icon';
...
<Icon>star</Icon>
Check the documentation
Related
We are using Microsoft Windows for both development and hosting.
npm version - 6.8.0
node version - 10.15.3
I would like to know how I can start my ReactApp locally on my development machine as in Production environment.
We have multiple environments at work such as Test, Staging, PreProd, Prod.... etc and we want to test the behaviour of the app without actual deployment to the target env.
We've got some logic statements in the source codes by using process.env.NODE_ENV to check the different environments.
I tried to update package.json scripts section as the following. But, it doesn't work.
"scripts": {
"start": "react-scripts start",
"start-prod": "cross-env NODE_ENV=production react-scripts start",
"start-prod2": "set NODE_ENV=production&&react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I tried both start-prod and start-prod2 . Even though it hosts the app successfully, it's always in development mode. Please see the following screenshots:
npm run start-prod
npm run start-prod2
If I use npm run build, it generates the build with production env. But it takes too much time to test.
Could you please guide me how I could simulate the various environment in my development machine?
P.S. I'm just using the default create-react-app script set up and I don't have any custom webpack config file.
Complete package.json file
{
"name": "react-workout-diary",
"version": "0.10.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.18",
"#fortawesome/free-brands-svg-icons": "^5.8.2",
"#fortawesome/free-regular-svg-icons": "^5.8.2",
"#fortawesome/free-solid-svg-icons": "^5.8.2",
"#fortawesome/react-fontawesome": "^0.1.4",
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"es6-object-assign": "^1.1.0",
"es6-promise": "^4.2.6",
"formik": "^1.5.7",
"has-value": "^2.0.2",
"is-empty": "^1.2.0",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-datepicker": "^2.6.0",
"react-delay": "^0.1.0",
"react-dom": "^16.8.6",
"react-moment": "^0.9.2",
"react-redux": "^7.0.3",
"react-router-dom": "^5.0.0",
"react-scripts": "^3.0.1",
"react-toastify": "^5.2.1",
"reactstrap": "^8.0.0",
"redux": "^4.0.1",
"redux-devtools-extension": "^2.13.8",
"redux-logger": "^3.0.6",
"redux-saga": "^1.0.2",
"redux-saga-routines": "^3.1.3",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"uuid": "^3.3.2",
"yup": "^0.27.0"
},
"scripts": {
"start": "react-scripts start",
"start-prod": "cross-env NODE_ENV=production react-scripts start",
"start-prod2": "set NODE_ENV=production&&react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"cross-env": "^5.2.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.13.2",
"enzyme-to-json": "^3.3.5",
"react-test-renderer": "^16.8.6",
"redux-saga-test-plan": "^4.0.0-beta.3"
}
}
You can't change the NODE_ENV variable:
You cannot override NODE_ENV manually. This prevents developers from
accidentally deploying a slow development build to production.
What you can do is to use different .env files:
From: React documentation
Files on the left have more priority than files on the right:
npm start: .env.development.local, .env.development, .env.local, .env
npm run build: .env.production.local, .env.production, .env.local, .env
npm test: .env.test.local, .env.test, .env (note .env.local is missing)
I just create a new react app using
create-react-app
and it worked as well , then I just cd into this app and tried
npm start
and then nothing worked & nothing appeared in the console
1- I have tried to remove node-module and then npm install again and try again
2- I tried to clean the cash and repeat step 1 and nothing worked
3- I tried to reinstall node and nothing worked ether .
that's my package.json file
{
"name": "ropofriend",
"version": "0.1.0",
"private": true,
"homepage": "https://kyrolos.github.io/Robofriend-app/.",
"dependencies": {
"gh-pages": "^2.0.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^5.1.1",
"react-scripts": "1.1.4",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"tachyons": "^4.9.1"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
try this:
"start": "cd packages/react-scripts && node bin/react-scripts.js start",
basically you have to give the address of your main view file.
or this:
"start": "node src/feathers/"
I have a frequent problem with npm, it occurs when running npm start command in a react project folder after some time not working with that project.
I get several lines of log include 'Failed to parse json' and 'package.json must be actual JSON, not just Javascript'.
The problem always happen after i get to deal with the project after some weeks of no-use, my package.json file seems fine and this is an example
{
"name": "carzyGame",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "1.1.4",
"redux": "^4.0.0",
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
}
}
another one:
{
"name": "neighborhood",
"version": "0.1.0",
"private": true,
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
"dependencies": {
"escape-string-regexp": "^1.0.5",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-foursquare": "^1.0.3",
"react-scripts": "1.1.4",
"sort-by": "^1.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
I tried to uninstall npm by npm uninstall and i got the same error, also removing node modules file could not help (the purpose is to re-install it).
So what is the reason of that problem and how to solve it?
The faulty lines are:
"redux": "^4.0.0",
"eject": "react-scripts eject",
Unlike in JavaScript, a trailing comma is not allowed in the last key-value pair of a JSON object.
I've got a sample react app I've been messing with to build out little small side projects. But I've hit a connundrum. Ctrl+C doesn't do anything to stop my app. I have to go through task manager manually to kill it. I've attached my package json. Is there some package or approach for this?
{
"name": "practice-app",
"description": "Sample react app to practice different designs, tools and concepts",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^1.2.2",
"#material-ui/icons": "^1.1.0",
"concurrently": "^3.6.0",
"json-server": "^0.14.0",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "concurrently \"react-scripts start\" \"json-server --watch data/db.json --port 3001\"",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:3001"
}
maybe try writing an npm stop script?
"scripts": {
"start": "app.js",
"stop": "pkill --signal SIGINT myApp"
}
Hope that helps
I'm using es-lint VScode extension and it is catching 5 linting errors, however when I run npm run lint from package.json It only lists 2 errors. I'm wondering why the terminal is not outputting all linting errors, so I can fix it with esw --fix on save.
Note: I'm using both prettier and airbnb config rules.
Here is my .eslintrc:
{
"extends": ["airbnb", "prettier"],
"plugins": ["prettier"],
"globals": { "document": false }
}
Here is pacjakge.json:
{
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-scripts": "1.0.17",
"redux": "^3.7.2",
"styled-components": "^2.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint --fix ./src",
"watch:lint": "node_modules/eslint-watch/bin/esw -w --fix"
},
"devDependencies": {
"eslint": "^4.12.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-prettier": "^2.3.1",
"eslint-plugin-react": "^7.5.1",
"eslint-watch": "^3.1.3",
"prettier": "^1.9.1"
}
You are using the --fix option when running npm run lint, that means ESLint will only display errors/warnings it can't fix automatically.. everything else, it will just fix and not complain about.
If you want it to list all the errors/warning, you can remove --fix from your NPM script, and it will list all erros/warnings it finds (it will run eslint ./src). Later if you want to fix the errors as well, run npm run lint -- --fix, that will pass everything after -- directly to the script, i.e., will run eslint ./src --fix which will work correctly.