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
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.
This question already has answers here:
Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort'
(3 answers)
Closed last year.
I have just started react. My page works fine on localhost.
Now I am trying to host my page on github. I have used "npm run deploy" but it doesn't work. it appears 2 errors:
Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort'.
You need to enable JavaScript to run this app.
This is my package.json
{
"homepage": "http://khanh0709.github.io/dolla",
"name": "dolla",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"react-scroll": "^1.8.4",
"styled-components": "^5.3.3",
"web-vitals": "^2.1.4"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"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": {
"gh-pages": "^3.2.3"
}
}
Maybe these are not error. I have wait visual studio deploy it for 1 hour. And, it work
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'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
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!