React中Formik表单验证异常：CodeSandbox报Yup.object未定义错误

Hey there! Let's break down why you're hitting this error in CodeSandbox even though your code works locally. The issue boils down to how Yup is being imported—this is likely a version mismatch or import syntax difference between your local environment and CodeSandbox.

What's Causing the Error? #

The error Cannot read property 'object' of undefined means the Yup variable you're trying to use is undefined—this happens when the import fails. In newer versions of Yup (v2+), the default export behavior changed, so your current import import Yup from 'yup'; might not pull in the library correctly in CodeSandbox.

Step-by-Step Fix #

1. Update the Yup Import Statement
   Change your import line from:

   import Yup from 'yup';
   

   To:

   import * as Yup from 'yup';
   

   This imports all exports from Yup as a named object, aligning with how newer versions of the library expose their API.

2. Verify Dependency Versions (Optional)
   Double-check your CodeSandbox project's dependencies:

   • Ensure formik and yup are installed (add them via the "Dependencies" tab if missing)
   • Confirm you're using compatible versions (Formik v2+ works seamlessly with Yup v2+)

Updated Working Code #

Here's your full code with the corrected import:

import React from 'react';
import { Button, Form, FormGroup, Label, Input, FormFeedback } from 'reactstrap';
import { withFormik, Field } from 'formik';
import * as 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 email is invalid or required</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;

Why This Works #

By using import * as Yup from 'yup';, we explicitly import all named exports from the Yup library. This ensures Yup.object() (and other Yup methods) are available as properties of the Yup object, matching the modern ES module syntax newer Yup versions use. This should resolve the undefined error in CodeSandbox.

内容的提问来源于stack exchange，提问作者hello world