Able to GET in Postman, but not in browser - api

Developing a React app and when calling the API in browser I receive a 404 error on the call, though the rest of the page renders successfully:
However, calling the same route in Postman returns successful:
It's not unique to this single route. Other API calls previously working through browser are resulting in the same error while calls through Postman continue to be successful.
Package.json for reference:
{
"name": "frontend",
"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.2",
"axios": "^0.21.1",
"react": "^17.0.1",
"react-alert": "^7.0.2",
"react-alert-template-basic": "^1.0.0",
"react-bootstrap": "^1.4.3",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"web-vitals": "^0.2.4"
},
"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"
]
},
"proxy": "http://127.0.0.1"
}

Related

POST http://localhost:3000/auth/register 500 (Internal Server Error)

When I run my project I GET THE proxy error :
Proxy error: Could not proxy request /auth/register from
localhost:3000 to http://127.0.0.1:8800/ (ECONNREFUSED).
I have tried numerous solutions by changing the URL in package.json and different things but could not get solution my package.json file is as follows:
{
"name": "booking",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.1.1",
"#testing-library/user-event": "^13.5.0",
"axios": "^1.2.4",
"dompurify": "^2.4.0",
"moment": "^2.29.4",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-quill": "^2.0.0",
"react-router-dom": "^6.4.1",
"react-scripts": "5.0.1",
"sass": "^1.55.0",
"web-vitals": "^2.1.4"
},
"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"
]
},
"proxy": "http://127.0.0.1:8800/"
}
I tried to get a successful post request byt I get error with the GET POST .

npm run build successfully locally with npm audit fix. But how on Netlify?

I have done my client coding and wanted to build on Netlify. However, when I run build locally, I got error and have no clue of the TypeError.
So I run npm audit fix --force as instructed, and then npm run build, it succeeded.
My question is : how to fix the dependencies when deploying on Netlify or Vercel?
my package.json:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#apollo/client": "^3.5.10",
"#emotion/react": "^11.8.2",
"#emotion/styled": "^11.8.1",
"#mui/icons-material": "^5.5.1",
"#mui/material": "^5.5.3",
"#testing-library/jest-dom": "^5.16.3",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"apollo-link-context": "^1.0.20",
"graphql": "^16.3.0",
"graphql-tag": "^2.12.6",
"jwt-decode": "^3.1.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-moment": "^1.1.1",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.1.2",
"web-vitals": "^2.1.4"
},
"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"
]
},
"proxy": "https://fathomless-mountain-12345.herokuapp.com/"
}

Module exists in package.json but not found on firebase

I have a module in my nextjs project which is mentioned under dependencies in package.json. It works locally. But when I build and deploy to firebase function I get the following error
Cannot find module 'react-lazyload'
My package.json
{
"name": "ui",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"export": "next export",
"predeploy": "next build",
"deploy": "firebase use popcorntales-40767 & firebase deploy"
},
"engines": {
"node": "10"
},
"dependencies": {
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.56",
"#zeit/next-css": "^1.0.1",
"bootstrap": "^4.5.0",
"cacheable-response": "^2.1.0",
"chart.js": "^2.9.3",
"firebase-admin": "^8.10.0",
"firebase-functions": "^3.6.1",
"next": "9.4.4",
"prop-types": "^15.7.2",
"react": "16.13.1",
"react-bootstrap": "^1.0.1",
"react-chartkick": "^0.4.0",
"react-dom": "16.13.1",
"react-lazyload": "^3.0.0",
"react-responsive-carousel": "^3.2.9",
"react-share": "^4.2.0"
},
"devDependencies": {
"firebase-functions-test": "^0.2.0"
}
}
Commands used
1) next build
2) firebase deploy

I met problem with npm start in reactjs, what happen?

This is my package.json file:
{
"name": "front-end",
"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",
"boostrap": "^2.0.0",
"bootstrap": "^4.5.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"reactstrap": "^8.4.1",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0"
},
"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"
]
}
}
When I run npm start this is the message:
npm ERR! missing script: start
npm ERR! A complete log of this run can be found in:
npm ERR! C:\...\Roaming\npm-cache\_logs\2020-06-16T01_36_35_559Z-debug.log
You need to run this command in the same directory as your package.json, or a child directory. You can check the current directory with pwd and change it with cd NEW_DIRECTORY.

How to fix "Support for the experimental syntax 'classProperties' isn't currently enabled" error if it has been already enabled?

Im building a crossplatform monorepo application for Web, Android and iOS from this example https://github.com/brunolemos/react-native-web-monorepo and when I added React Native Base to my project I changed my config-overrides.js according to this guide https://docs.nativebase.io/docs/GetStarted.html for Web
But after that I got
SyntaxError: C:\Users\maksi\Desktop\ecmsk\node_modules\native-base\node_modules\react-native-vector-icons\lib\create-icon-set-from-fontawesome5.js: Support for the experimental syntax 'classProperties' isn't currently enabled error.
I tried adding loose option to #babel/plugin-proposal-class-properties plugin but that didn't work. And I also tried adding plugins to my package.json and that didn't work either.
package.json
{
"name": "web",
"version": "0.0.1",
"private": true,
"dependencies": {
"#types/history": "^4.7.2",
"#types/js-cookie": "^2.2.2",
"#types/react": "^16.8.23",
"#types/react-redux": "^7.1.1",
"#types/redux-api-middleware": "^3.0.1",
"connected-react-router": "^6.5.2",
"history": "^4.9.0",
"js-cookie": "^2.2.0",
"native-base": "^2.13.4",
"react": "16.8.4",
"react-art": "^16.8.6",
"react-dom": "16.8.4",
"react-native-elements": "^1.1.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "0.10.0",
"react-redux": "^7.1.0",
"react-router": "^5.0.1",
"react-scripts": "2.1.8",
"redux": "^4.0.4",
"redux-api-middleware": "^3.0.1"
},
"scripts": {
"compile": "tsc -b",
"prestart": "npm run compile",
"start": "concurrently \"npm run compile -- -w\" \"npm run _start\"",
"_start": "react-app-rewired start",
"prebuild": "npm run compile",
"build": "react-app-rewired build",
"pretest": "npm run compile",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.5.5",
"babel-plugin-react-native-web": "^0.11.5",
"concurrently": "*",
"customize-cra": "^0.4.1",
"react-app-rewired": "^2.1.3",
"typescript": "*"
}
}
config-overrides.js
const path = require('path');
const {
override,
addWebpackAlias,
babelInclude,
addBabelPlugins
} = require('customize-cra');
module.exports = override(
addWebpackAlias({
"react-native/Libraries/Renderer/shims/ReactNativePropRegistry": "react-native-web/dist/modules/ReactNativePropRegistry",
"react-native": "react-native-web"
}),
babelInclude([
path.resolve('src'),
path.resolve('../components/src'),
path.resolve('../../node_modules/native-base-shoutem-theme'),
path.resolve('../../node_modules/react-navigation'),
path.resolve('../../node_modules/react-native-easy-grid'),
path.resolve('../../node_modules/react-native-drawer'),
path.resolve('../../node_modules/react-native-safe-area-view'),
path.resolve('../../node_modules/react-native-vector-icons'),
path.resolve('../../node_modules/react-native-keyboard-aware-scroll-view'),
path.resolve('../../node_modules/react-native-web'),
path.resolve('../../node_modules/react-native-tab-view'),
path.resolve('../../node_modules/static-container'),
]),
addBabelPlugins(
"#babel/plugin-proposal-class-properties"
),
);
The problem might be the included paths. In my case I have it this way:
babelInclude([
path.resolve('node_modules/react-native-typing-animation'),
path.resolve('src')
])
Paths are relative to the config.overrides file.