react.js & tailwind.css project not deploying to heroku properly - reactjs

I have a create-react-app that I have successfully gotten up and running on my localhost, with all of the features of tailwind.css available for me to integrate with my JSX. It compiles fine and I used this tutorial to accomplish this: https://codingthesmartway.com/using-tailwind-css-with-react/.
An example of an error, commas representing new console log lines, is: npm ERR! react-tailwindcss#0.1.0 build:css: postcss src/styles/tailwind.css -o src/styles/main.css, npm ERR! spawn ENOENT, npm ERR!, npm ERR! Failed at the react-tailwindcss#0.1.0 build:css script. I used heroku logs --tail to get this information. I am at a loss as to how to fix this issue. This is the app: https://peaceful-island-18911.herokuapp.com/. It should look like (and does on my localhost) the end result of the tutorial mentioned. I know there has to be a way to get a react w/ tailwindcss app deployed to heroku and function as it does on localhost. I have done it before using the more common css framework bootstrap.
Below is my package.json file with my scripts and dependencies. I followed the tutorial I mentioned above for my file architecture. I am a newer dev so please go easy on me but any help or guidance in solving this issue will be greatly appreciated. I really hope this is a simple fix beginner mistake! Thank you.
{
"name": "react-tailwindcss",
"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",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "npm run build:css && react-scripts start",
"build": "npm run build:css && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:css": "postcss src/styles/tailwind.css -o src/styles/main.css",
"prebuild": "npm run build:css",
"prestart": "npm run build:css"
},
"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"
]
},
"devDependencies": {
"autoprefixer": "^9.8.6",
"postcss-cli": "^7.1.1",
"tailwindcss": "^1.6.2"
}
}

Related

Uncaught ReferenceError: process is not defined at ./node_modules/process-nextick-args/index.js

Here is my package.json:
{
"name": "new-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^14.4.3",
"buffer": "^6.0.3",
"dotenv": "^16.0.3",
"guardian-wallet": "^0.0.6-rc.30",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1",
"web-vitals": "^3.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"preinstall": "npx npm-force-resolutions"
},
"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": {
"react-error-overlay": "^6.0.11"
},
"resolutions": {
"//": "See https://github.com/facebook/create-react-app/issues/11773",
"react-error-overlay": "6.0.9"
}
}
My app.js :
import logo from './logo.svg';
import './App.css';
import GuardianWallet from "guardian-wallet";
I have tried many the solutions I came across nothing helped:
I have tried upgrade react-scripts to its latest version.
Tried npm install --save-dev react-error-overlay#6.0.9 --force.
Tried adding resolution.
Deleted node_modules and package.lock.json and then used npm cache clean --force and then
did npm install.
process is a Node.js global; process is not defined in a React application most likely means that you're trying to use an NPM package that was written for Node.js, not a browser environment.
Depending on your specific environment and needs, there are a few approaches you could take to fix it: You could replace the NPM package that you're using with one that's written for browsers, or submit a request or PR to add browser support to the NPM package you're using, or set up polyfills in your bundler (see, e.g., here).

"npm run deploy" not working after trying to deploy my react app to github

"npm run deploy" not working after trying to deploy my react app to github and getting: ENOENT: no such file or directory, stat 'C:s<path\build>'C:\Users\USER 2021\Desktop\robotfriends>npm run deploy npm WARN config global --global, --local are deprecated. Use --location=global instead.
robotfriends#0.1.0 predeploy
npm run build
npm WARN config global --global, --local are deprecated. Use --location=global instead.
robotfriends#0.1.0 build
react-scripts build
robotfriends#0.1.0 deploy
gh-pages -d build
ENOENT: no such file or directory, stat 'C:\Users\USER 2021\Desktop\robotfriends\build'
here's my Package.json :
{
"homepage": "https://Aligumi.github.io/robotfriends",
"name": "robotfriends",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"tachyons": "^4.12.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"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": "^4.0.0"
}
}
Found the solution my self! :)
I had to run npm run build to create the build folder. Then ran npm run deploy

Bit - component has no build task defined

I am trying to make a test component on bit dev, but I fail.
After succesfully:
creating an app - CRA
initializing bit
installing compiler
adding / building / exporting component
I get a warning when I go to bit dev page of a component (which is exported properly, but preview is not loading):
Note: your component has no build task defined!
To consume components using NPM or Yarn you should define a build environment for your components. Learn more.
And therefore I can't then install this component in other project.
Package.json looks like this:
{
"name": "new-one",
"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",
"react": "^17.0.2",
"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"
]
},
"bit": {
"env": {
"compiler": "bit.envs/compilers/react#2.0.0"
},
"componentsDefaultDirectory": "components/{name}",
"packageManager": "npm"
}
}
I search and search, but no one seems to have such a problem. Any idea?
Error during installation in another project:
npm ERR! code ENOVERSIONS
npm ERR! No valid versions available for #bit/maciejwira.main.test
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Maciej\AppData\Roaming\npm-cache\_logs\2021-05-15T14_38_51_258Z-debug.log

React Component not reload in browser after save the changes in localhost

I created a new react project using Create-React-App. In the old projects, Whenever I did the changes in the component and save the component it will reflect in the browser, but in the new project when I saved the changes in the code the browser did not reload and not reflect the changes. So I stopped the running process and again giving the npm start
Here is my package.json file.
{
"name": "new-application",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"redux": "^4.0.5"
},
"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"
]
},
"devDependencies": {
"redux-devtools": "^3.5.0",
"webpack": "^4.41.5"
}
}
Can I add something in package.json to reload the browser automatically whenever I done changes?
I had a similar (or event the same) problem and I changed starting command in the package.json file by adding following flags: --watch --watch-poll to the webpack-dev-server:
{
//...
"scripts": {
"start": "webpack-dev-server --env.ENVIRONMENT=development --content-base src/ --mode development --watch --watch-poll",
// ...
}
// ...
}
Now, using npm start and then changing src files I can see changes in the browser.
Please here https://webpack.js.org/configuration/watch/ for more options.
Install your app again using :
npx create-react-app appname
And don't edit package.json
If you prefer not modifying the package.json you can reinstall your project.
Two ways for that.
With git:
Push your project on git
Clear the project's folder on your computer
git clone https://github.com/my-account/my-project.git
npm install
Without git:
Back up the content of your project except for node_modules
Clear the project's folder except for package.json
npm install
Paste the files you backed up

How can I deploy react app on github pages?

I try to deploy my react web app to github pages but when i can't find website online
In the console, it says that the app is ready to publish and i should run command npm run deploy but i see the same message every time i run that command
Here's package.json file:
{
"name": "weather-app",
"version": "0.1.0",
"private": true,
"homepage": "http://shotiko-forecast.github.io/weather",
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
"react-scripts": "1.1.4",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},
"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"
},
"browserslist": {
"production": [
">0.2%",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
install dependencies to the project.
> npm i gh-pages
In your package.json add script and homepage
"homepage": "https://username.github.io/repo-name",
"scripts": {
"deploy": "gh-pages -d build"
}
run build Script to build for production
npm run build
run deploy script to deploy your code to the-pages it automatically push on git-hub gh-pages branch and auto-selected on gh-pages branch you can check settings > GitHub pages.
npm run deploy
now it time to check your
https://username.github.io/repo-name
The name of your React app is weather-app. I assume that the github repository for the app is named as weather-app. There is an error in your package.json file. The homepage property is set incorrectly.
It should be set as,
"homepage": "http://<<github-user-name>>.github.io/<<github-repo-name>>"
In your case, change weather to weather-app and everything should work fine

Resources