I have an ongoing React.js project with these react versions.
"react": "^17.0.2",
"react-scripts": "^4.0.3",
The project is running perfectly without any issues. I wanted to add tailwind CSS for some parts of my project. So I follow all the steps in this Official documentation guide
But tailwind is not working at all. I have noticed my npm start command is a bit different, that may be the reason. My start command is "start": "react-app-rewired start" Normally when you create project with create-react-app it "start": "react-scripts start" Is this the reason that tailwind is not working here? How can I fix this?
Any help!
Thanks in advance.
You can resolve it by creating the Tailwind build process manually.
Create a tailwind-setup.css inside src folder.
Edit your package.json script object to this:
"scripts": {
"tailwind":"npx tailwindcss -i ./src/tailwind-setup.css -o ./src/tailwind-output.css --watch",
"start": "react-app-rewired start & yarn run tailwind",
"build": "react-app-rewired build & yarn run tailwind",
"test": "react-app-rewired test & yarn run tailwind",
"eject": "react-scripts eject"
...
},
And import ./src/tailwind-output.css in your App.tsx.
Related
My React.js app was created with this command:
npx create-react-app my-app
Now how can I convert this script section in package.json to run the app without react-scripts?
"scripts": {
"start": "NODE_ENV=development node_modules/react-scripts/bin/react-scripts.js start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Should it be something like:
node index.js
How do I convert each option in that scripts section?
Thanks
When you create a React app with npx create-react-app my-app you make your react app dependant of react-scripts.
If you no longer want to use this react-scripts who give you a lot of help you can follow this tutorial from the official documentation to eject yourself.
But you can't remove the dependency from an existing project, maybe you are considering to make a new one, and this tutorial will help you to achieve it !
I currently working in a react - expressjs project which was worked by someone before.
Currently, when I'm trying to run the command
npm run build
The project shows me the following error:
What can I do with that error?
As an additional information (I don't know if that is related), when I try to deploy any change I do in the project it doesn't take it into account due as I understand, the deploy depends on chunk.js files (created by the build). I mean, chunk.js files are not been updated.
And in the configuretion of the deploy... the project specifies that I needs to point those chunk.js files
How can I change that configuration?
Here is my package.json file (the scripts section)
Thanks in advance
can you share your package.json Scripts ? there is a possibility you are missing the "build" Script
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
try to reinstall the dependencies again globally, check this link => reactgo.com/react-scripts-command-not-found and sh: react-scripts: command not found after running npm start
I try to deploy my react app to github pages, but it seems that it didn't work properly. I got a blank page when I tried to visit it by link. Anybody knows solutions? Thank you for your help!
My code is like:
package.json
"homepage": "https://yunxiuqiu1115.github.io/food-ordering-site",
"scripts": {
"start": "PORT=3006 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
I ran npm run deploy and get the successful outcome.
Everything works well locally, but does not work in github pages. Hope that anyone can help! Thanks!
We need to install GitHub Pages package as a dev-dependency.
cd **
npm install gh-pages --save-dev
Add properties to package.json file.
Follow this for more details https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f
In my package.json I have run scripts that look like:
"scripts": {
"build:style":"tailwind build src/styles/index.css -o src/styles/tailwind.css",
"start": "npm run build:style && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I'm using this tailwindcss framework for CSS, and it uses PostCSS to update the CSS.
Currently if I update my CSS npm doesn't run the build, so my CSS changes are not visible until I stop and re-rerun:
npm run start
Is there a way for npm to watch the CSS files, and when changed also run the build:style command?
Unfortunately, I don't believe Tailwinds has a 'watch' feature. I believe one workaround would be to install the watch package.
npm install watch
You have a lot of scripts going on and without knowing how you've integrated PostCSS and the likes, it's tough to know exactly what to do. One option would be to create a new script that takes advantage of the new watch node package.
"scripts": {
"build:style":"tailwind build src/styles/index.css -o src/styles/tailwind.css",
"start": "npm run build:style && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"watch": "watch 'npm run start'"
},
If that doesn't work, check out the blog below. It uses the same methodology, but may have insight that could help you figure it out!
https://flaviocopes.com/tailwind-setup/
After creating a react app with 'create-react-app' things have been successful till now. I have made a working react project. But now that I'm looking to implement unit testing with jest.
Using npm to install: 'npm install --save-dev jest'
Then running: npm ls jest I notice that the react-script is looking for a jest version that is significantly older.
package.json:
"dependencies": {
"react": "^16.8.1",
"react-dom": "^16.8.1",
"react-redux": "^6.0.0",
"react-scripts": "2.1.5",
"redux": "^4.0.1"
},
"devDependencies": {
"jest": "^24.7.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject"
}
npm ls jest result:
+-- jest#24.7.1
`-- react-scripts#2.1.5
`-- jest#23.6.0
npm start error:
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix
locally.
The react-scripts package provided by Create React App requires a
dependency:
"jest": "23.6.0"
Don't try to install it manually: your package manager does it
automatically.
However, a different version of jest was detected higher up in the tree:
C:\Users\userName\sample js codes\redux\songs\node_modules\jest (version:
24.7.1)
Is there a solution to solve this dependency version issue?
Create-react-app comes with Jest built-in, there is no need to install it additionally.
You have a version conflict now because you installed it additionally.
To fix it, revert your changes to package.json.