We Keep Coding

Error: Can't resolve 'fs' or 'path' with react

I've been trying to get SendGrid work with my React app. I have created a config file that is emailConfig.js which I am using to send my email through my signup form in SignUp.jsx. Currently I have emailConfig in a /utlis folder I created in the client side. When I try to run my application I keep getting hit with two error messages.
Error Message 1
ERROR in ./node_modules/#sendgrid/helpers/classes/attachment.js
9:11-24
Module not found: Error: Can't resolve 'fs' in '/Users/user/Developer
Files/app/client/node_modules/#sendgrid/helpers/classes'
Error Message 2
ERROR in ./node_modules/#sendgrid/helpers/classes/attachment.js
10:13-28
Module not found: Error: Can't resolve 'path' in
'/Users/user/Developer
Files/app/client/node_modules/#sendgrid/helpers/classes'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js
core modules by default. This is no longer the case. Verify if you
need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path":
false }
Should I have this in my /server/utils folder instead, the emailConfig.js and create a syslink of some sort, or what am I missing that is causing this message. I tried creating a syslink originally and couldn't get it to work.
I have gone and attached my folder structure, package.json(client), package.json(sever), SignUp.jsx, and emailConfig.js below
Folder Structure
App
/client
/src
/components
/signup
/SignUp.jsx
/utils
/emailConfig.js
/sever
package.json (client)
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/free-solid-svg-icons": "^6.3.0",
"#fortawesome/react-fontawesome": "^0.2.0",
"#sendgrid/mail": "^7.7.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^1.3.3",
"emailjs-com": "^3.2.0",
"formik": "^2.2.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.8.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
"yup": "^1.0.0"
},
"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"
]
}
}
package.json (server)
{
"name": "app-server",
"version": "1.0.0",
"description": "backhend of kinkbucket",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node app.js",
"build": "react-scripts build",
"eject": "react-scripts eject"
},
"author": "Ainsley",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"mongoose": "^6.9.2"
},
"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"
]
}
}
SignUp.jsx
import React, { useState } from "react";
import { useFormik } from "formik";
import * as Yup from "yup";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { faEye, faEyeSlash } from "#fortawesome/free-solid-svg-icons";
import axios from "axios";
import { useNavigate } from "react-router-dom";
import emailjs from "emailjs-com";
import emailConfig from "../../utils/emailConfig.js";
import "./signUp.css";
const validationSchema = Yup.object().shape({
username: Yup.string().required("Required"),
email: Yup.string().email("Invalid email").required("Required"),
password: Yup.string().required("Required"),
confirmPassword: Yup.string().oneOf(
[Yup.ref("password"), null],
"Passwords must match"
),
});
const SignUp = () => {
const [showPassword, setShowPassword] = useState(false);
const history = useNavigate();
const formik = useFormik({
initialValues: {
username: "",
email: "",
password: "",
confirmPassword: "",
},
validationSchema,
onSubmit: async (values) => {
try {
const response = await axios.post("/api/users/signup", values);
const userId = response.data._id;
const token = response.data.token;
// Send verification email
emailjs
.send(
emailConfig.SERVICE_ID,
emailConfig.TEMPLATE_ID,
{
to_name: values.username,
message: `Please click this link to verify your email address: https://YOUR_DOMAIN/verify/${userId}/${token}`,
to_email: values.email,
},
emailConfig.USER_ID
)
.then(
(result) => {
console.log(result.text);
},
(error) => {
console.log(error.text);
}
);
history.push("/");
} catch (err) {
console.log(err);
}
},
});
const { values, errors, touched, handleChange, handleBlur, handleSubmit } =
formik;
const handleSignUp = (e) => {
e.preventDefault();
handleSubmit();
};
return (
<div className="signup-container">
<form onSubmit={handleSubmit} className="signup-form">
<h2>Sign Up</h2>
<div className="form-control">
<label htmlFor="username">Username</label>
<input
type="text"
id="username"
name="username"
value={values.username}
onChange={handleChange}
onBlur={handleBlur}
/>
{touched.username && errors.username && (
<div className="error">{errors.username}</div>
)}
</div>
<div className="form-control">
<label htmlFor="email">Email</label>
<input
type="email"
id="email"
name="email"
value={values.email}
onChange={handleChange}
onBlur={handleBlur}
/>
{touched.email && errors.email && (
<div className="error">{errors.email}</div>
)}
</div>
<div className="form-control password-input">
<label htmlFor="password">Password</label>
<input
type={showPassword ? "text" : "password"}
id="password"
name="password"
value={values.password}
onChange={handleChange}
onBlur={handleBlur}
/>
<button
type="button"
className="toggle-password"
onClick={() => setShowPassword(!showPassword)}
>
<FontAwesomeIcon icon={showPassword ? faEyeSlash : faEye} />
</button>
{touched.password && errors.password && (
<div className="error">{errors.password}</div>
)}
</div>
<div className="form-control">
<label htmlFor="confirmPassword">Confirm Password</label>
<input
type="password"
id="confirmPassword"
name="confirmPassword"
value={values.confirmPassword}
onChange={handleChange}
onBlur={handleBlur}
/>
{touched.confirmPassword && errors.confirmPassword && (
<div className="error">{errors.confirmPassword}</div>
)}
</div>
<div className="form-control">
<input type="checkbox" id="terms" name="terms" />
<label htmlFor="terms">I agree to the terms and conditions</label>
</div>
<div className="form-actions">
<button
type="submit"
className="signup-button"
disabled={!formik.isValid}
onClick={handleSignUp}
>
Sign Up
</button>
</div>
</form>
</div>
);
};
export default SignUp;
emailConfig.js
const sgMail = require("#sendgrid/mail");
sgMail.setApiKey(process.env.SENDGRID_API_KEY);
const sendConfirmationEmail = (to, name) => {
const msg = {
to,
from: "your_email#example.com",
subject: "Welcome to KinkBucket!",
text: `Hi ${name}, thanks for signing up with KinkBucket!`,
html: `<p>Hi ${name},<br><br>Thanks for signing up with KinkBucket!</p>`,
};
sgMail.send(msg);
};
module.exports = { sendConfirmationEmail };

Slow performance react-use-gesture and react-spring

Drag examples in the docs such as this one are extremely fast and map very accurately to my finger position. I've tried copying the examples one-to-one but there is a clear lag to catch up with my finger position.
Here is a code sandbox example which has a clear lag when testing on a real device.
Information:
React Use Gesture version: (I've tried all manner of combinations of versions with no impact but this is the configuration in the codesandbox)
"react": "17.0.2",
"react-dom": "17.0.2",
"react-scripts": "4.0.0",
"react-spring": "9.1.2",
"react-use-gesture": "9.1.3"
Device: IPhone 12 pro max
OS: [e.g. iOS14.5.1]
Browser chrome
function PullRelease() {
const [{ x }, api] = useSpring(() => ({ x: 0 }));
const bind = useDrag(({ movement: [mx], down }) =>
api.start({ x: down ? mx : 0 })
);
return (
<animated.div {...bind()} style={{ padding: 40, background: "gold", x }}>
Hello World
</animated.div>
);
}

I combed through the source code of the examples. The issue was in fact with react-spring, I needed to supply immediate: true while the touch is active.
https://codesandbox.io/s/react-spring-gesture-basic-swipe-immediate-6bje9?file=/src/App.js
function PullRelease() {
const [{ x }, api] = useSpring(() => ({ x: 0 }));
const bind = useDrag(({ movement: [mx], down }) =>
api.start({ x: down ? mx : 0,
immediate: down // the key line
})
);
return (
<animated.div {...bind()} style={{ padding: 40, background: "gold", x }}>
Hello World
</animated.div>
);
}

Mapbox production error in console. "Uncaught ReferenceError: y is not defined"

I have a full-stack React.js application deployed on Heroku. Everything deployed fine except for Mapbox. In development, everything works nice. As soon as I open my application in Heroku, Mapbox displays a black screen.
I have added config vars in Heroku for the default public Mapbox token.
When I check the console in production, I am getting an error saying "Uncaught ReferenceError: y is not defined"
I'm using Mapbox with React Map GL, and not sure what the issue is, looking for help at this point.
I have added a screenshot of how it looks in development and the black screen I get in production.production-mapbox-error development-mapbox-working
my client-side package.json:
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.8",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.6.0",
"framer-motion": "^3.2.1",
"node-sass": "^4.14.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-hook-form": "^6.14.1",
"react-map-gl": "^6.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"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://localhost:8080"
}
my ReactMapGL component:
import ReactMapGL, { Marker, Popup } from "react-map-gl";
import { listLogEntries } from "./api";
import MapPin from "../../assets/icons/map-pin1.svg";
import MapPinRed from "../../assets/icons/map-pin-red1.svg";
import LogEntryForm from "../LogEntryForm/logEntryForm";
import "./reactMap.scss";
const ReactMap = () => {
const [logEntries, setLogEntries] = useState([]);
const [showPopup, setShowPopup] = useState({});
const [addEntryLocation, setAddEntryLocation] = useState(null);
const [viewport, setViewport] = useState({
width: "100vw",
height: "100vh",
latitude: 49.246292,
longitude: -123.116226,
zoom: 8,
});
const getEntries = async () => {
const logEntries = await listLogEntries();
setLogEntries(logEntries);
};
useEffect(() => {
getEntries();
}, []);
const showAddMarkerPopup = (event) => {
const [longitude, latitude] = event.lngLat;
setAddEntryLocation({
longitude,
latitude,
});
};
const MAP = process.env.REACT_APP_MAPBOX_TOKEN;
const MAP_STYLE = process.env.REACT_APP_MAP_STYLE;
return (
<div className="map">
<ReactMapGL
className="map__react-gl"
{...viewport}
// Setting map theme from mapbox
mapStyle={MAP_STYLE}
// mapbox Api Access Token
mapboxApiAccessToken={MAP}
onViewportChange={setViewport}
onDblClick={showAddMarkerPopup}
>
{logEntries.map((entry) => (
<div key={entry._id}>
<Marker latitude={entry.latitude} longitude={entry.longitude}>
<div
onClick={() =>
setShowPopup({
[entry._id]: true,
})
}
>
<img
className="map__pin"
style={{
width: `${4 * viewport.zoom}px`,
height: `${4 * viewport.zoom}px`,
}}
src={MapPin}
alt="Map Pin"
/>
</div>
</Marker>
{showPopup[entry._id] ? (
<Popup
className="map__popup"
latitude={entry.latitude}
longitude={entry.longitude}
dynamicPosition={true}
closeButton={true}
closeOnClick={false}
onClose={() => setShowPopup({})}
anchor="top"
>
<div className="map__info-container">
<h3 className="map__info-heading">{entry.title}</h3>
<hr className="map__hr" />
<p className="map__info-description">{entry.description}</p>
<hr className="map__hr" />
<p className="map__info-comment">{entry.comments}</p>
<div className="map__info-image-container">
{entry.image && (
<img
className="map__image"
src={entry.image}
alt={entry.title}
/>
)}
</div>
<small className="map__info-visited">
Visited on: {new Date(entry.visitDate).toLocaleDateString()}
</small>
</div>
</Popup>
) : null}
</div>
))}
{addEntryLocation ? (
<div>
<Marker
latitude={addEntryLocation.latitude}
longitude={addEntryLocation.longitude}
>
<div>
<img
className="map__pin-red"
style={{
width: `${4 * viewport.zoom}px`,
height: `${4 * viewport.zoom}px`,
}}
src={MapPinRed}
alt="Map Pin"
/>
</div>
</Marker>
<Popup
className="map__popup"
latitude={addEntryLocation.latitude}
longitude={addEntryLocation.longitude}
dynamicPosition={true}
closeButton={true}
closeOnClick={false}
onClose={() => setAddEntryLocation(null)}
anchor="top"
>
<div className="map__new-info-container">
<LogEntryForm
onClose={() => {
setAddEntryLocation(null);
getEntries();
}}
location={addEntryLocation}
/>
<form action=""></form>
</div>
</Popup>
</div>
) : null}
</ReactMapGL>
</div>
);
};
export default ReactMap;

This is an issue of Webpack. For any future viewers, here's what worked for me:
import ReactMapGL, {Marker} from 'react-map-gl'
import 'mapbox-gl/dist/mapbox-gl.css';
import mapboxgl from 'mapbox-gl';
// eslint-disable-next-line import/no-webpack-loader-syntax
mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;
Also, remember to npm install worker-loader.

So after some more research, I found that the problem is in the version of react-map-gl (6.0.2). Installing react-map-gl#5.2.5 finally displayed my Layers and everything works fine. I don't know what is the problem in version 6.0.2. Hope they will fix this soon.

Browser's back button taking too long

I'm trying to add a page in my NextJS project which contains a form for posting some information. This page is only accessible by clicking an "add new" bootstrap button, wrapped in a Link tag. The redirect goes fine but when I click on the browser's back button it takes like 2 min to go back to the homepage (where is the "add new" button).
this is my Package.json:
{
"name": "FrontEnd",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#zeit/next-css": "^1.0.1",
"bootstrap": "^4.3.1",
"isomorphic-unfetch": "^3.0.0",
"next": "^9.1.1",
"react": "^16.10.2",
"react-calendar": "^2.19.2",
"react-dom": "^16.10.2"
}
}
My 'Home' page:
const Index = (props) => (
<Layout>
<ul>
{props.reservas.map(reserva => (
<li>
<ReservaPreview props={reserva.props}/>
</li>
))}
<li><AgregarReservaBoton /></li>
</ul>
</Layout>
);
My 'Bootstrap button':
class AgregarReservaBoton extends Component {
render() {
return (
<div>
<Link href='/nuevaReserva'>
<button type="button"></button>
</Link>
</div>
)
}
}
My 'Redirect' page:
const NuevaReserva = (props) => (
<div>
<Layout>
<AgregarReservaForm />
</Layout>
</div>
)
Imports and Exports done.
Browser's back button working fine.

Why does my React app works fine when i downgrade node_modules but fails when update it?

I have this app with updated node_modules where Signup fails but everything else works. i have a backup of old version of node_modules when i replace the current version with that one. it starts to work. I am also deploying it on netlify. So when i run npm run build and upload the build folder manually to netlify it works, but when i try deploying from github, signup fails again.
I tried replacing the package.json with the old one, then running npm install but that doesn't work either.
Code for signup
import { Link, withRouter } from "react-router-dom";
import { Redirect } from "react-router";
import PasswordMask from "react-password-mask";
import {
withFirebase,
firebase,
FirebaseContext,
db
} from "../../../Components/Firebase/firebase";
import * as ROUTES from "../../../Constants/routes";
import { compose } from "recompose";
import PhyxData from "../../../Constants/phyxData.js";
import "./styles.css";
const DemoSignUpPage = () => (
<div>
<img
src="/images/demoOnePage/group.png"
className="demo-page-one-illustration dp-signup"
/>
<div
className="lead-text margin-top-40 demo-signup"
>
Thanks for trying Phyxable!
<br />
Let's continue the healing process.
</div>
<div className="center margin-top-16">
<div className="inline-block">
<DemoSignUpForm />
</div>
</div>
</div>
);
const INITIAL_STATE = {
username: "",
email: "",
passwordOne: "",
passwordTwo: "",
error: null
};
class DemoSignUpFormBase extends Component {
constructor(props) {
super(props);
this.state = { ...INITIAL_STATE, redirect: false };
}
onSubmit = event => {
console.log("sign up submit called", this.props);
const { username, email, passwordOne } = this.state;
this.props.firebase
.doCreateUserWithEmailAndPassword(email, passwordOne)
.then(authUser => {
console.log("sign up submit called 2");
return this.props.firebase.user(authUser.uid).update({
joinDate: new Date().toLocaleDateString("en-US"),
userProfile: {
lastPhyx: { date: new Date(), level: 1, session: 1 },
subscription: { paid: false },
progress: {
posture: {
1: { 0: { date: new Date().toLocaleDateString("en-US") } }
}
},
name: username,
email: email,
score: {
feelingGood: 1,
lastDate: new Date().toLocaleDateString("en-US"),
longestStreak: 1,
streak: 1,
totalTime: 2
},
VAS: {},
currentPhyx: "posture",
accountType: "USER",
notification: {},
signedIn: false
}
});
})
.then(authUser => {
console.log("in on submit sign up");
this.setState({ ...INITIAL_STATE });
this.setState({ redirect: true });
})
.catch(error => {
this.setState({ error });
});
event.preventDefault();
};
onChange = event => {
this.setState({ [event.target.name]: event.target.value });
};
handleTryFirstClick = () => {
this.setState({ redirect: true });
};
render() {
console.log("demo sign up", this.props);
if (this.state.redirect) {
// return <Redirect push to="/home" />;
window.location.href = "/home";
}
const { username, email, passwordOne, passwordTwo, error } = this.state;
const isInvalid =
// passwordOne !== passwordTwo ||
passwordOne === "" || email === "" || username === "";
return (
<form className="margin-top-16">
<div className="center">
<div className="inline-block">
<input
name="username"
value={username}
onChange={this.onChange}
type="text"
placeholder="Full Name"
/>
<div className="height-8" />
<input
name="email"
value={email}
onChange={this.onChange}
type="text"
placeholder="Email Address"
/>
<div className="height-8" />
<PasswordMask
id="password"
name="passwordOne"
value={passwordOne}
onChange={this.onChange}
type="password"
placeholder="Password"
inputStyles={{
padding: "8px",
fontSize: "16px"
}}
inputClassName="PasswordMaskInput"
buttonStyles={{
width: "61px"
}}
/>
{/* <PasswordMask
name="passwordTwo"
value={passwordTwo}
onChange={this.onChange}
type="password"
placeholder="Confirm Password"
inputStyles={{
padding: "8px",
fontSize: "16px"
}}
inputClassName="PasswordMaskInput"
buttonStyles={{
width: "61px"
}}
/> */}
</div>
</div>
<div className="margin-top-40">
<button
onClick={event => {
this.onSubmit(event);
}}
disabled={isInvalid}
type="submit"
>
Sign Up
</button>
</div>
{error && <p>{error.message}</p>}
</form>
);
}
}
const DemoSignUpForm = compose(
withRouter,
withFirebase
)(DemoSignUpFormBase);
export default DemoSignUpPage;
export { DemoSignUpForm };
Here is my package.json :
{
"name": "finalphyx",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/lab": "^3.0.0-alpha.30",
"disable-scroll": "^0.4.1",
"firebase": "^6.1.1",
"firebase-functions": "^2.3.1",
"html-loader": "^0.5.5",
"mdbreact": "^4.15.0",
"netlify": "^2.4.6",
"react": "^16.7.0",
"react-bootstrap": "^0.32.4",
"react-div-100vh": "^0.3.4",
"react-dom": "^16.7.0",
"react-firebaseui": "^3.1.2",
"react-ga": "^2.5.7",
"react-jw-player": "^1.19.0",
"react-meta-tags": "^0.7.4",
"react-password-mask": "^3.3.1",
"react-player": "^1.11.0",
"react-responsive": "^7.0.0",
"react-router-dom": "^5.0.1",
"react-scripts": "^3.0.1",
"react-scroll": "^1.7.11",
"react-share": "^3.0.0",
"react-stripe-checkout": "^2.6.3",
"react-stripe-elements": "^3.0.0",
"react-sweet-progress": "^1.1.2",
"recompose": "^0.30.0",
"stripe": "^7.1.0",
"video-react": "^0.13.7",
"waypoints": "^4.0.1",
"window-scroll-manager": "^1.1.4"
},
"devDependencies": {
"bundle-loader": "^0.5.6",
"prettier": "^1.18.2",
"pretty-quick": "^1.11.0",
"aws-sdk": "^2.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build && echo '/* /index.html 200' > build/_redirects",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"deploy": "aws s3 sync build s3://www.phyxable.com"
},
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://jacobmjones#bitbucket.org/jacobmjones/web.git"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"homepage": "/",
"author": "",
"license": "ISC",
"description": ""
}

If the problem as exactly as you described, then it is obviously not a problem with your code but with your dependencies. Notice that it is also natural that if your code works with certain versions it might not work with others (whether upgraded or downgraded)
The first thing i would try is get the old package json, and run a clear install with it (clear your node cache and completely delete your node_modules folder, after you backed up what you need to do). If it works cool, if not, then one of your dependencies has a change that was meant to be minor but yet was a breaking change (it caused your code to stop working)
Now usually because new versions (even ones that were not meant to have breaking changes) can cause breaking changes, npm creates a file that is called package-lock.json. Unlike the package.json this one contains the exact versions that was used during a certain installation, and installing node modules using this package file, should exactly mirror the state of your dependencies at that time.
If you have that lock file and install with it -using npm ci- then it should work.