Why is wrapper not found even though the code explicitly exports it?

14 Views Asked by At

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.

0

There are 0 best solutions below