npm run build issues when using concurrently - reactjs

I am running a react app that uses express as a backend. I followed this tutorial on how to connect the two then deploy to heroku. In short I am running express on port 5000 as instructions tell me to, and on client side in the package json proxy to port 5000. from server side I run a npm tool called concurrently that runs both in tandem.
Now the problem is the npm run build only seems to be half working. the page loads for a split second on port 5000 (before run build I would use port 3000) disappears leaving only my custom background colors. no errors i can see either for server side or react app side.
I tried changing the server's port numbers first thinking this was the issue as serve -s build runs the app on port 5000 which likely conflicted but the same issue remains.
Please let me know what code If any I can show to help diagnose this as Im afraid I do not know what to present other than my file layout (see the tutorial's link I have the same overall layout) and bellow will be my package jsons for client and server respectively.
Client package.json:
"name": "friftr_version_2_0",
"version": "2.0.0",
"description": "Friftr, but its in react",
"main": "index.js",
"author": "V1llage_ID10T",
"license": "ISC",
"dependencies": {
"#material-ui/core": "^4.9.8",
"#material-ui/icons": "^4.9.1",
"axios": "^0.19.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-lazy-load-image-component": "^1.4.1",
"react-router-dom": "^5.1.2",
"react-router-page-transition": "^3.1.0",
"react-scripts": "^3.4.1",
"typescript": "^3.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:3001",
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
Server package.json
{
"name": "friftr2",
"version": "2.0.0",
"description": "friftr redesign in express, react, material-ui, mongoose database. ",
"main": "server.js",
"repository": {
"type": "git",
"url": "git+https://github.com/n/a.git"
},
"author": "V1LLAGE_ID10T",
"license": "ISC",
"bugs": {
"url": "https://github.com/n/a/issues"
},
"homepage": "https://github.com/n/a#readme",
"dependencies": {
"axios": "^0.19.2",
"body-parser": "^1.19.0",
"cheerio": "^1.0.0-rc.3",
"concurrently": "^5.1.0",
"connect-mongo": "^3.2.0",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"express-session": "^1.17.0",
"got": "^10.6.0",
"hsts": "^2.2.0",
"http-proxy-middleware": "^1.0.1",
"mongo-sanitize": "^1.1.0",
"mongoose": "^5.9.3",
"mongoose-findorcreate": "^3.0.0",
"node-fetch": "^2.6.0",
"nodemon": "^2.0.2",
"passport": "^0.4.1",
"passport-google-oauth20": "^2.0.0",
"passport-local-mongoose": "^6.0.1",
"tall": "^3.0.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"client-install": "cd client && npm install",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
}
}

so the consensus from my discord buddies has told me NEVER do what I just did and instead uninstall concurrently and have all my fetch requests connect to the address and port rather than root onward.
so my fetch requests on react would go from /api/query/n/n/new/all/0 to http://localhost:5000/api/query/n/n/new/all/0 or whatever port i work on.

Related

The missing script:"dev" error in react on npm run dev

this is my package.json file it's a code from a course to test my code functionality.
enter image description here
The npm run build is working by the way & I'm using vite to run the npm.
{
"name": "adopt-me",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev":"vite",
"build":"vite build",
"preview":"vite preview",
"format": "prettier --write \"src/**/*.{js,jsx}\"",
"lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
"test": "echo\"Error: no test specified\"&& exit1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#vitejs/plugin-react": "^2.1.0",
"eslint": "^8.24.0",
"eslint-config-prettier": "^8.5.0",
"prettier": "^2.7.1",
"vite": "^3.1.4"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
to run my react on browser in, I expecting to get a localhost number to do that
According to your screenshot:
You need to run npm run dev not npm run div

React: Invalid hook call error and Framer Motion issue

I am having a "Error: Invalid hook call. " issue after installing and using Framer-Motion. So I followed the debugging strategy from the React.js(https://reactjs.org/warnings/invalid-hook-call-warning.html) docs and the only thing that I see that might be causing this issue is last part before "Other Causes" where it talks about React Router Link.
here is the code to two files that caused this issue. Package.json file from outside the "client" directory (for the server):
"main": "server.js",
"scripts": {
"start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
"start:prod": "node server.js",
"start:dev": "concurrently \"nodemon --ignore 'client/*'\" \"npm run client\"",
"client": "cd client && npm run start",
"install": "cd client && npm install",
"build": "cd client && npm run build",
"heroku-postbuild": "npm run build"
},
"repository": {
"type": "git",
"url": "git+https://github.com/MrDawit/Portafoglio_react.git"
},
"author": "",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/MrDawit/Portafoglio_react/issues"
},
"homepage": "",
"dependencies": {
"#popperjs/core": "^2.9.2",
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"bootstrap": "^4.6.0",
"concurrently": "^5.3.0",
"cookie-parser": "^1.4.5",
"core-js": "^3.15.2",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"framer-motion": "^4.1.17",
"googleapis": "^67.0.0",
"if-env": "^1.0.4",
"nodemailer": "^6.4.17",
"nodemon": "^2.0.7",
"react": "^17.0.1",
"react-bootstrap": "^1.4.3",
"react-dom": "^17.0.1",
"run-all": "^1.0.1"
},
"devDependencies": {
"gh-pages": "^3.1.0"
}
And here is the code from the Package.json file inside the "client" directory for React:
"dependencies": {
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.0",
"axios": "^0.21.1",
"gh-pages": "^3.1.0",
"http-proxy-middleware": "^1.0.6",
"nodemailer": "^6.4.17",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "set Port=3080 && 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"
]
}
The issue ended up being that Framer Motion was supposed to be in the package.json file that is inside the "client" directory. Since Bootstrap and other similar modules were included in the outer package.json file and they installed correctly, it mislead me thinking that Framer Motion could do the same.
Steps for fixing my issue:
npm uninstall framer-motion
deleting both node_modules(inside and outside the "client" directory) directories
deleting both package-lock.json files
npm install
cd client
npm install framer-motion
Not doing step 5 in the first place was the cause of my error.

How can I deploy a website on Heroku with parcel?

I want to deploy website on Heroku which created using MERN. I created it with parcel. When I deploy on Heroku, It shows following error and I can't deploy it on heroku.
How can I fix this issue?
Error Image
Package.json
{
"name": "TestProject",
"version": "1.0.0",
"description": "",
"main": "index.jsx",
"scripts": {
"start": "parcel public/index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#material-ui/core": "^4.11.3",
"axios": "^0.21.1",
"dropzone": "^5.9.2",
"parcel": "^2.0.0-beta.2",
"react": "^17.0.2",
"react-bootstrap": "^1.5.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0"
},
"devDependencies": {
"#parcel/transformer-image": "^2.0.0-beta.2",
"react-dropzone": "^11.3.2"
}
}
Heroku would look for a build command for production in there.
"scripts": {
"build": "npm run build",
"install": "npm install",
"start": "....",
},

I cannot run React Native app on expo environment on Android

I cannot run React Native app on expo environment on Android; it throws this error when running the app on Expo on my Android phone:
Something went wrong.
32.0.0 is not a valid sdk version. Options are 35.0.0, 34.0.0, 33.0.0, UNVERSIONED.
Same app works perfectly on Expo environment on my iOS phone.
I launch 'expo start' from my MAC and connect both phones to the same WIFI as my MACBOOK PRO.
Here is my app.json file :
{
"expo": {
"name": "travel-management-app",
"slug": "travel-management-app",
"description": "Travel management application",
"privacy": "public",
"sdkVersion": "32.0.0",
"platforms": [
"ios",
"android"
],
"version": "1.0.0",
"orientation": "portrait",
"primaryColor": "#cccccc",
"icon": "./assets/icons/bg_screen5_square.png",
"splash": {
"image": "./assets/icons/bg_screen5.png"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
}
}
}
Here is my package.json file :
{
"name": "travel-management-app",
"version": "1.0.0",
"description": "Travel management Application",
"author": "Luchian Chivoiu",
"private": true,
"homepage": "https://www.sienna.ro",
"main": "src/index.native.js",
"dependencies": {
"#babel/polyfill": "^7.2.5",
"#expo/vector-icons": "^9.0.0",
"expo": "^32.0.0",
"expo-linear-gradient": "^3.0.0",
"gh-pages": "^2.0.1",
"lodash": "^4.17.4",
"material-ui": "^0.20.2",
"prop-types": "^15.7.2",
"react": "16.5.0",
"react-art": "^16.8.3",
"react-autowhatever": "^10.2.0",
"react-dom": "^16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-autocomplete-input": "^4.1.0",
"react-native-elements": "^1.0.0-beta8",
"react-native-gesture-handler": "1.0.17",
"react-native-gesture-handler-web": "npm:react-native-gesture-handler#1.1.0",
"react-native-keyboard-aware-scroll-view": "^0.9.1",
"react-native-picker-select": "^6.3.3",
"react-native-ratings": "^6.3.0",
"react-native-touchable-scale": "2.0.0",
"react-native-vector-icons": "^6.3.0",
"react-native-web": "^0.10.0",
"react-navigation": "^3.5.1",
"react-navigation-animated-switch": "^0.2.1",
"react-redux": "6.0.1",
"react-scripts": "^2.1.5",
"react-select": "^3.0.4",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},
"scripts": {
"web": "react-app-rewired start",
"native": "expo start",
"build:web": "react-app-rewired build",
"deploy": "gh-pages -d build",
"build:android": "expo ba",
"build:ios": "expo bi",
"eject:web": "react-scripts eject",
"eject:native": "expo eject",
"prettify": "prettier --write 'src/**/*.js'",
"clean-install": "rm -rf node_modules && npm cache clean --force && watchman watch-del-all && yarn"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.3.4",
"babel-preset-expo": "^5.0.0",
"customize-cra": "^0.2.12",
"prettier": "^1.15.3",
"react-app-rewired": "^2.1.0"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
package-lock.json contains this:
"react-native": {
"version": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"integrity": "sha512-+taJh7bN2owmwaZpJUrNpHdmPAL6ZynNCZj15uLQgjaPFq0ZBIG2ZWuSJ48eGoUjAb3lrWxkmLlHb2eJFXc7sQ==",
How can I make this work on Android too? This app worked on expo on my Android phone some days ago until I did some package update.
I have updated something, some package , a package and maybe that made this Android expo app not able to run.
You are using an outdated Expo SDK and applications, SDK 32 and below is no longer maintained.
Follow the instructions on this link you should be good to go
Hope this Helps!

Cannot display conent from app.js when deploying on Netlify (npm run build)

I am having trouble getting content to come through in my app.js file when I try to host on Netlify (npm run build)
Here is what my package.json file looks like:
{
"name": "nasa-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"dotenv": "^8.1.0",
"jquery": "^1.9.1",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-helmet": "^5.2.1",
"react-scripts": "0.9.5"
},
"devDependencies": {
"babel-eslint": "^9.0.0",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.1",
"eslint-config-prettier": "^4.3.0",
"eslint-config-wesbos": "0.0.19",
"eslint-plugin-html": "^5.0.5",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-react-hooks": "^1.7.0",
"prettier": "^1.18.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"description": "**A Day In The Life On Mars**",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/able-leopard/a-day-in-the-life-on-mars.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/able-leopard/a-day-in-the-life-on-mars/issues"
},
"homepage": "https://github.com/able-leopard/a-day-in-the-life-on-mars#readme"
}
It seems like I can't post screenshots because I am still new here but basically all the hosted version shows is
<div id="root"><div/> while the local version actually displays all the contents in my app.js
Thanks so much in advance!
In your package.json you need to change your homepage to "/"..
This resolved your issue: https://vigilant-bhabha-b3e068.netlify.com/ (This link no longer works, this was only to demonstrate that I got it working for OP - not trying to hijack their deployment)
Let me know once you see this and I will remove the Netlify app I created and the repo I forked..
In order to demonstrate that this is working:
URL:
SITE:
{
...
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/able-leopard/a-day-in-the-life-on-mars/issues"
},
"homepage": "/"
}

Resources