formik form validation not working reactjs

Question

following this tutorial here https://www.youtube.com/watch?v=yNiJkjEwmpw&t=1578s on formik form validation and running into an issue when implementing validation

validationSchema: Yup.object().shape({ email: Yup.string().email().required(), password: Yup.string().min(6).required() }),

i get no error messages on my local environment but on my codesandbox i get the following error
TypeError Cannot read property 'object' of undefined

which is pretty straight forward but im not knowledgable enough to debug (still new to react and formik) thanks for all the help here below is full source code & also here is a link to codesandbox

https://codesandbox.io/s/kw4x2k62rv

import React from 'react';
//import logo from './logo.svg';
import './App.css';
import { Button, Form, FormGroup, Label, Input, FormFeedback } from 'reactstrap';
import { withFormik, Field } from 'formik';
import Yup from 'yup';

const App = ({
  values,
  handleChange,
  handleSubmit,
  errors,
  touched
}) =>
  (
    <Form onSubmit={handleSubmit}>
      <FormGroup>
        <Label for="fname">First Name</Label>
        <Input
          value={values.fname}
          onChange={handleChange}
          type="text"
          name="fname"
          id="fname"
          placeholder="first name"
          autoComplete="first name"
        />
      </FormGroup>
      <FormGroup>
        <Label for="lname">Last Name</Label>
        <Input
          onChange={handleChange}
          value={values.lname}
          type="text"
          name="lname"
          id="lname"
          placeholder="last name"
          autoComplete="last name"
        />
      </FormGroup>
      <FormGroup>
        <Label for="email">Email</Label>
        <Input
          onChange={handleChange}
          value={values.email}
          type="email"
          name="email"
          id="email"
          placeholder="email"
          autoComplete="email"
        />
        {  touched.email && errors.email && <FormFeedback>Oh noes! that name is already taken</FormFeedback> }
      </FormGroup>
      <FormGroup>
        <Label for="password">Password</Label>
        <Input
          onChange={handleChange}
          type="password"
          value={values.password}
          name="password"
          id="password"
          placeholder="password"
          autoComplete="password"
        />
      </FormGroup>
      <FormGroup>
        <Label for="confirmPassword">Confirm Password</Label>
        <Input
          onChange={handleChange}
          value={values.confirmPassword}
          type="password"
          name="confirmPassword"
          id="confirmPassword"
          placeholder="confirm password"
          autoComplete="confirm password"
        />
      </FormGroup>
      <FormGroup>
        <Label>
          <Field type="checkbox" name="tos" checked={values.tos} />
          Check me out
        </Label>
      </FormGroup>
      <Button> Submit </Button>
    </Form>
  )

const FormikApp = withFormik({
  mapPropsToValues({ email, password, fname, lname, confirmPassword, tos }) {
    return {
      email: email || '',
      password: password || '',
      confirmPassword: confirmPassword || '',
      fname: fname || '',
      lname: lname || '',
      tos: tos || false
    }
  },
  validationSchema: Yup.object().shape({
    email: Yup.string().email().required(),
    password: Yup.string().min(6).required()
  }),
  handleSubmit(values) {
    console.log(values);
  }
})(App)

export default FormikApp;

Answer 1

I'm not sure why it works locally and not on codesandbox but I can tell you know it isn't working on codesandbox.

Yup does not have a default export e.g. export { string, object etc }. See: https://github.com/jquense/yup/blob/master/src/index.js

Doing import Yup from 'yup' would mean that Yup is undefined. If you wanted to using import syntax you could do import * as yup from 'yup' then do yup.object() or use require - var yup = require('yup')