When I run my create react app application using npm start, the eslint errors are shown in the browser on top of my site. I expect to see these warnings and errors in the terminal but not in the actual website, how can I remove this?
package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-router-dom": "^5.1.2",
"react-scripts": "^5.0.0",
"react-transition-group": "^4.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint ."
},
"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": "^8.12.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.4.0"
}
}
You can disable errors in browser by adding the environment variable ESLINT_NO_DEV_ERRORS as it is mentioned here.
If you have .env file in your project, just add this line to it, and re-build the app:
ESLINT_NO_DEV_ERRORS=true
Inside eslint.rc you will have section for your env within module.exports
you can add false to the browser parameter, this will also fix this issue
env: {
browser: false,
es2021: true,
node: true,
},
Related
I've been looking at many forums for a solution but haven't found any. I'm not sure what I'm doing wrong.
I'm using react and styled components to create a website on GitHub Pages, but i keep getting a blank page and a 404 error in the console which is:
"Failed to load resource: the server responded with a status of 404 ()"
"main.79bf5a2e.js"
My repository: https://github.com/Visibyte/Space-Tourism
My package.json
{
"homepage": "https://visibyte.github.io/space-tourism",
"name": "space-tourism-react",
"version": "0.1.0",
"private": false,
"dependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^6.2.1",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.2"
},
"scripts": {
"start": "react-scripts start",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"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": {
"gh-pages": "^3.2.3",
"styled-components": "^5.3.3"
}
}
Any help would be much appreciated, thanks.
I am doing a React app which I deploy on GitHub pages. https://asaroz.github.io/DCI_Hackathon_TeamE
Deployments worked without much problems before, but now the console gives me this:
the path to the file seems to be correct:
I deploy with the npm module from GitHub pages.
{
"homepage": "http://asaroz.github.io/DCI_Hackathon_TeamE/",
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"bootstrap": "^5.1.3",
"node-sass": "^6.0.1",
"react": "^17.0.2",
"react-bootstrap": "^2.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"react-simple-image-slider": "^2.3.0",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d 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"
]
},
"devDependencies": {
"gh-pages": "^3.2.3"
}
}
I sadly have no clue what the exact problem is. Perhaps the Response gives me a hint, but I just don't know that much about Response errors jet. Thanks in advance.
Ok github pages didn't update/deploy my changes. I don't know why. I fixed the issue by editing a useless space into the file in question on github.
Recently I pushed my project to Gitlab so I could also work on it on my laptop to practise my React.
After I pulled and npm installed everything (had to use npm audit fix --force which was weird) I tried to run it. Everything looked fine but the images wont show up and when I inspect it, it says [object Module]. Now I have googled it and most answers say something about changing the options to
options: {
esModule: false,
},
in webpack
The thing is, I think I never worked with webpack and on my desktop it works fine (I don't have a webpack.config.js).
This is my package.json which is the same as on my laptop:
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"axios": "^0.19.2",
"bootstrap": "^4.5.0",
"cors": "^2.8.5",
"node-sass": "^4.14.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"react-select": "^3.1.0"
},
"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"
]
},
"devDependencies": {}
}
I used the 'default' property to access the string value (path):
<img
src={require("../../assets/images/svg/shopping-cart.svg").default}
alt="Shopping cart"/>
This solution I took from Carlos Avila's comment to a vuejs GitHub issue.
To Change this Go to node_modules->react-scripts->config->webpack.config.js
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: imageInlineSizeLimit,
name: 'static/media/[name].[hash:8].[ext]',
esModule: false
},
}
Find the above line and add esModule: false in options.
Afterwards the image will display.
I am starting to learn React. I do follow several tutorials on youtube, but keep facing this problem when adding https://react-bootstrap.github.io/. I do follow all instructions provided on react-bootsrtap website https://react-bootstrap.github.io/getting-started/introduction.
When I npm-start in console, I do see following message:
Failed to compile.
./src/components/Home.jsModule not found: Can't resolve 'react-bootsrtap' in 'C:\Users\Nikolay\desktop\testsite\nikolay\nick\src\components'
When I remove any reference to bootstrap from my code, it compiles fine.
Package.json looks like this (note that bootstrap is included):
{
"name": "nick",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"bootstrap": "^3.4.1",
"react": "^16.13.1",
"react-bootstrap": "^1.0.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1"
},
"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"
]
}
}
Please don't suggest running
npm install --save react-bootstrap bootstrap
instead of
npm install react-bootstrap bootstrap
as it does not help
Thanks!
I have followed github pages deployment instructions and it's deployed correctly. But when I open the homepage link on another browser it's showing blank page.
my package.json file provided below
App link
https://abid413119.github.io/React-Redux-Todo-App/
{
"name": "todo-app",
"version": "0.1.0",
"homepage": "https://abid413119.github.io/React-Redux-Todo-App",
"private": true,
"dependencies": {
"#material-ui/core": "^4.3.2",
"#material-ui/icons": "^4.2.1",
"gh-pages": "^2.1.1",
"material-ui": "^0.20.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-lottie": "^1.2.3",
"react-redux": "^7.1.0",
"react-scripts": "3.1.1",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
"uuid": "^3.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"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"
]
}
}
It is set to PRIVATE. Make it PUBLIC! Go to SETTINGS. At the bottom of the page there section Danger Zone. From there make it PUBLIC! And deploy your app all again!