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!
Related
I have a simple react app that I started recently just to study a few things and suddenly, when I try to run it with:
yarn start
it does not throws any error, just stays like this:
yarn run v1.22.19
warning ..\package.json: No license field
$ react-scripts start
and nothing happens, what should i do?
PS: my complete package.json:
{
"name": "prototype",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^13.0.0",
"#testing-library/user-event": "^13.2.1",
"framer-motion": "^7.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"start": "^5.1.0",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.0"
},
"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"
]
},
"devDependencies": {
"eslint": "^8.21.0"
}
}
As you can see in the error message the path of the package.json file is in the warning:
yarn run v1.22.19
warning ..\package.json: No license field
$ react-scripts start
That double dots ..\ saying that the package.json file is one folder up from where you are running the yarn start command. It could be OUTSIDE the project folder you're working on.
So if you go one directory up you will find another package.json file. Either add "license" field into that package.json file or simply delete the file if you do not need it.
This should solve your problem.
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'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
UPDATE: I found out that the index.html is linking the files incorrectly like it doesn't recognize where the files are stored. I corrected the css link tag in the header of my bundled document but Now I am getting errors with JavaScript still and I cannot see how to fix them because its a very large map.
Whenever I use react-scripts to build out my CRA Application and run the document I get
I am almost 95% sure this is because of react-bootstrap. Just wondering if anyone else is having these issues and if there is a fix?
Here are my dependencies
{
"name": "test-app",
"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",
"bootstrap": "^4.4.1",
"gh-pages": "^2.2.0",
"react": "^16.13.1",
"react-bootstrap": "^1.0.0",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"reactstrap": "^8.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"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"
]
}
}
Found the answer here:
https://github.com/parcel-bundler/parcel/issues/470#issuecomment-354734896
It turns out you need to specify in your build command with Parcel that there should not be a / in front of the referenced files.
In case that link becomes deleted this what I am referencing:
Sorry i forgot a dot try parcel build index.html --public-url ./
this is also documented on the doc site: https://parceljs.org/production.html