Develop Reference

react-app-rewired not working with tailwind css

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.

How to fix Unable to resolve "react-native-screens" from "node_modules\react-navigation-stack\lib\module\views\StackView\StackViewCard.js"?

I used below command for react app routes.
npm i react-native-router-flux --save
Then i restart npm by "npm start" and get this error
Unable to resolve "react-native-screens" from "node_modules\react-navigation-stack\lib\module\views\StackView\StackViewCard.js"
Failed building JavaScript bundle.
How can fix this error? I also updated npm.
This is package.json file
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~36.0.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-router-flux": "^4.2.0",
"react-native-web": "~0.11.7"
},
"devDependencies": {
"babel-preset-expo": "~8.0.0",
"#babel/core": "^7.0.0"
},
"private": true
}

I used react native official navigation. It really helpful and easy to use.
Visit https://facebook.github.io/react-native/docs/navigation

I had the same issue. Noticed that package.json in the repo is missing react-native-screens from the dependencies.
npm i react-native-screens

This is because of the new react-navigation changes. Doing a npm install right now is installing the latest versions instead of the previous versions
You should clear the cache by removing node_module, .expo and package-lock.json and then reinstall all the packages and start the project by using the following command: expo r -c which should reset the cache and make the project work again as intended.
More Info

Installing following two,
npm install --save #react-native-community/masked-view
npm install react-native-safe-area-context
it is work for me
or use,
npm install #react-navigation/native
for install 'react-navigation'

I got a similar error after upgrading from React Navigation V3 to V4.
Simply doing
npm i react-native-screens
solved the problem for me.

Install the following dependencies.
#react-native-community/masked-view
react-native-safe-area-context

expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view

Importing the graph kit in React Native results in error 500

I am using the latest version of Expo. I have created a project by expo init my_project and added the React Native Chart Kit.
Here is the package.json:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "^35.0.0",
"react": "16.8.3",
"react-dom": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
"react-native-chart-kit": "^3.6.1",
"react-native-web": "^0.11.7"
},
"devDependencies": {
"babel-preset-expo": "^7.0.0"
},
"private": true
}
When I import the following it gives me the error: "The development server returned response error code: 500":
import {
LineChart,
BarChart,
PieChart,
ProgressChart,
ContributionGraph,
StackedBarChart
} from "react-native-chart-kit";
Why this error happens even though this module is accessible through the Expo as it stated in this [page][2]?
[2]: https://forums.expo.io/t/any-graph-library/1674/7

To use react-native-chart-kit, you also have to install react-native-svg. So, just install it through npm and hopefully it will work.
$ npm i react-native-svg react-native-chart-kit
You can try my project on this repo: click here.
Enjoy 👍

Most cases this error is related to your node_modules, try the following:
Stop your Expo application server
Delete your node_modules directory and package-lock.json
Run npm install or yarn install
Run npm install --save react-native-svg
Start your application by running expo start -c
Hope this helps!

Module 'jest-junit' in the testResultsProcessor option was not found

I have setup jest and jest-junit as the reporter and followed the simple instructions given by jest-junit.
This includes npm install jest --save-dev and npm install jest-junit --save-dev
My package.json looks like this (excerpt):
"devDependencies": {
"jest": "^22.4.4",
"jest-junit": "^4.0.0",
},
"scripts": {
"test": "jest --ci --testResultsProcessor='jest-junit'"
},
"jest": {
"verbose": true,
"testResultsProcessor": "jest-junit"
},
"jest-junit": {
"suiteName": "Test Suite",
"output": "./junit.xml"
}
When running npm run test on my machine (OSX), it works well. When running it as part of the CI build process or on another Windows machine, I am getting the following error:
Module 'jest-junit' in the testResultsProcessor option was not found.

Maybe you just need to install the missing module to the other machine:
npm install jest-junit

Found the solution and it was the removal of inverted commas.
"test": "jest --ci --testResultsProcessor='jest-junit'"
should become
"test": "jest --ci --testResultsProcessor=jest-junit"

How to make create-react-app auto build?

I have been using create react app for a while. 'npm start' or 'yarn start' autoreloads works fine by itself but now I have an another problem. Currently I run the app on express server through the build folder, and I use 'npm run build' since express is serving the built files. There are many api calls which requires the app to be ran through this way. Now it become tedious to manually do 'npm run build' every time. Is there a simple way or work around to build automatically just like 'npm start' without eject the app(I know could eject and configure webpack to do that, but i don't want to go down that path)? Thanks

Unfortunately this is something you will have to do yourself. You can use a tool like npm-watch to accomplish what you want though:
Install npm-watch
npm i --save-dev npm-watch
package.json
{
"name": "react-app",
"version": "0.1.0",
"private": false,
"devDependencies": {
"npm-watch": "^0.1.8",
"react-scripts": "0.9.5",
},
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"watch": "npm-watch"
},
"watch": {
"build": "src/"
}
}
Afterwards, just use npm run watch to start up npm-watch so it can rebuild your assets on changes.
Update:
React-scripts now includes a proxy option that proxies requests to a different host/port. For example, if your backend is running on localhost at port 9000 under the /api route, then you would add this line to your package.json: "proxy": "localhost:9000/api". You could then make requests as you normally would in production. (source: https://create-react-app.dev/docs/proxying-api-requests-in-development)

While this doesn’t really answer your question, you shouldn’t be using npm run build in development. Not only the rebuilds are slow, but it also skips important React warnings for performance and size, so you’ll end up scratching your head more and getting a lot less details in the warnings.
If you just need to do API requests with Express, use the proxy feature which lets you proxy API requests from npm start to your server. There is also a tutorial with a matching repository demonstrating how to do that.
In production, of course, you should use the build produced by npm run build. But you would only need to run it before deployment.

Run your backend on a different port. If your running on express modify the file bin/www
var port = process.env.PORT || 9000
and in your /src folder create a config file where you configure your api host,routes, params etc
//config/index.js
export const Config = {
protocol: 'http',
host: window.location.hostname, //or the environment variable
params: '/api/',
api: {post:'/posts/'}
}
and in your calling component or where ever your calling the api's
import {Config} from '../config'
axios.get(`${Config.protocol}${Config.host}${Config.params}${Config.api.posts}${some id i guess}`)

The easiest way that I found (as of 10/19/21) is to use cra-build-watch.
Works perfectly.

i am also using create react app, this is how i modified my scripts to run project for development(windows), build the production build and run the production build.
"scripts": {
"start": "set PORT=8080 && react-scripts start",
"build": "react-scripts build",
"deploy": "set PORT=8008 && serve -s build"
}
npm start : run project for development(windows)
npm run-script build : build the production build
npm run-script deploy: run the production build
npm install -g serve before run npm run-script deploy.

1> npm install create-react-app -g
2> create-react-app Your_Apps_Name