I have a wrapper inside a wrapper folder inside assets which is used by my Register.jsx page, I am getting the following error when I try to run: Uncaught SyntaxError: The requested module '/src/assets/wrappers/RegisterAndLoginPage.js' does not provide an export named 'Wrapper' (at Register.jsx:3:10)
RegisterAndLogin.js:
import styled from "styled-components";
const Wrapper = styled.section`
min-height: 100vh;
display: grid;
align-items: center;
.logo {
display: block;
margin: 0 auto;
margin-bottom: 1.38rem;
}
.form {
max-width: 400px;
border-top: 5px solid var(--primary-500);
}
h4 {
text-align: center;
margin-bottom: 1.38rem;
}
p {
margin-top: 1rem;
text-align: center;
line-height: 1.5;
}
.btn {
margin-top: 1rem;
}
.member-btn {
color: var(--primary-500);
letter-spacing: var(--letter-spacing);
margin-left: 0.25rem;
}
`;
export default Wrapper;
Register.jsx
import React from "react";
import { Link } from "react-router-dom";
import { Wrapper } from "../assets/wrappers/RegisterAndLoginPage";
import { FormRow, Logo } from "../components";
const Register = () => {
return (
<Wrapper>
<form className="form">
<Logo />
<h4>Register</h4>
<FormRow type="text" name="name" defaultValue="john" />
<FormRow
type="text"
name="lastname"
labelText="Last Name"
defaultValue="smith"
/>
<FormRow type="text" name="location" defaultValue="earth" />
<FormRow type="email" name="email" defaultValue="[email protected]" />
<FormRow type="password" name="password" defaultValue="secret123" />
<button type="submit" className="btn btn-block">
Register
</button>
<p>
Already a member?
<Link to="/login" className="member-btn">
login
</Link>
</p>
</form>
</Wrapper>
);
};
export default Register;
I ran the app and expected to see updates to the UI.