I'm following along with a tutorial on building a bar chart in React from this YouTube video:[https://www.youtube.com/watch?v=c_9c5zkfQ3Y]
After installing Chartjs and Chartjs-2 and then running npm start, I get the following error:
Failed to compile.
Failed to load config "react-app" to extend from.
Referenced from: /mnt/c/Users/perez/dev/hometown-viewers/package.json
This is from my package.json file:
{
"name": "hometown-viewers",
"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",
"chart.js": "^3.0.2",
"eslint": "^7.23.0",
"react": "^17.0.2",
"react-chartjs-2": "^2.11.1",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"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"
]
}
}
How can I go about fixing this? Any help would be much appreciated!
The react wrapper is not compatible with version 3 of chart.js please downgrade to chart.js 2.9.4 (latest V2 release) by changing "chart.js": "^3.0.2", to "chart.js": "^2.9.4", in your dependencies block, run npm install again and it will work
Related
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.
I have already pre installed tailwind css for my react library and added a script called build-css but run it, npm run build-css it gives me following error :
'tailwindcss' is not recognized as an internal or external command
package.json file
{
"name": "react-firebase-authentication",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.0",
"autoprefixer": "^9.8.8",
"postcss": "^7.0.39",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-icons": "^4.3.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.17",
"web-vitals": "^0.2.4"
},
"scripts": {
"build-css": "tailwindcss build src/styles.css -o public/styles.css",
"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"
]
}
}
CMD Error
If you are using Tailwind 2.x, you have to use Craco to configure it properly. Please follow this guideline from Tailwind documentation.
Installing postcss-cli will help solves the problem.
npm install -D postcss postcss-cli
I created this project using npx create-react-app and I'm trying to run a react project using npm start ,it doesn't work on the localhost
but it works on my network, the black cube is just me trying out Three.js on React
here is package.json
{
"name": "project-name",
"version": "0.1.0",
"private": true,
"dependencies": {
"#react-three/drei": "^7.8.5",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"drei": "^2.2.21",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"react-spring": "^9.2.4",
"react-three-fiber": "^6.0.13",
"sass": "^1.41.1",
"three": "^0.132.2",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"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"
]
}
}
I also use typescript for the React app, I'm not sure if that's why or not.
here's the terminal output
Compiled successfully!
You can now view project-name in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.10.106:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
I'm trying to deploy an app on amplify but I get an error when running the command amplify publish :
Missing script: "build"
An error occurred during the publish operation: Unknown error occurred.
Did someone run into this error and can help?
I have attached a picture of the error on my terminal[![amply terminal error
]1
and also my package.json
{
"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",
"axios": "^0.21.1",
"jsonwebtoken": "^8.5.1",
"react": "^17.0.2",
"react-chartjs-2": "^2.11.1",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"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"
]
},
"proxy": "http://localhost:5000"
}
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!