question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TypeError at build on custom Yup method (with Next.js)

See original GitHub issue

Describe the bug A type TypeError is thrown at build time (Next.js) due to custom Yup method.

To Reproduce Declare a custom Yup method

Yup.addMethod(Yup.mixed, 'fileSize', function (
    MAX_FILE_SIZE = DEFAULT_MAX_FILE_SIZE
  ) {
    return this.test(
      'fileSize',
      { key: 'common:validation.mixed.upload.file_size' },
      (value) => get(value, '[0].size', 0) <= MAX_FILE_SIZE
    );
  });

Try to use this method in Yup schema and build your application

Expected behavior My project is not using Typescript. No issue on development environment (next dev).

The application build should work normally.

Platform (please complete the following information):

"yup": "^0.29.3"
"next": "^9.5.5"

Additional context image

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
jquensecommented, Oct 15, 2020

not sure, seems like Next specific issue. The only reason it would undefined is if the addMethod code didn’t run

0reactions
clement-faurecommented, Feb 2, 2021

Why this is issue is closed? @clement-faure Have you found a way to fix this issue?

I din’t manage to make it work using a custom yup method so i ended up creating my own yup configuration file and exporting

export const YupFile = ({
  fileSize = DEFAULT_MAX_FILE_SIZE,
  fileTypes = DEFAULT_SUPPORTED_FORMATS,
} = {}) =>
  Yup.mixed()
    .test(
      'fileSize',
      { key: 'common:validation.mixed.upload.file_size' },
      (value) => {
        if (isArray(value)) {
          // In case array of files, check every file
          return value
            .map((file) => isValidFileSize(file, fileSize)) // (file, fileSize) => get(file, 'size', 0) <= fileSize
            .reduce((a, b) => a && b);
        }
        // Otherwise, only one single file
        return isValidFileSize(file, fileSize);
      }
    )
    .test(
      'fileType',
      { key: 'common:validation.mixed.upload.file_type' },
      (value) => {
        if (isArray(value)) {
          return value
            .map((file) => isValidFileType(file, fileTypes)) // (file, fileTypes) => fileTypes.includes(get(file, 'type', 'image/png')
            .reduce((a, b) => a && b);
        }
        return isValidFileType(file, fileTypes);
      }
    );

Read more comments on GitHub >

github_iconTop Results From Across the Web

javascript - TypeError: yup.string.require is not a function. (In ...
I am using formik for making form and yup for form validation. ... at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in ...
Read more >
Yup - npm
Yup is a JavaScript schema builder for value parsing and validation. Define a schema, transform a value to match, validate the shape of...
Read more >
Validating Optional Objects with Yup - Object Partners
First, notRequired simply makes is so that undefined values do not fail validation. In the case of object types, Yup has a default...
Read more >
Ignoring TypeScript Errors - next.config.js
Next. js fails your production build ( next build ) when TypeScript errors are present in your project. If you'd like Next.
Read more >
React Form Validation With Formik + GraphQL + Yup
... including React, GraphQL, Formik and Yup. Take your development skills to the next level. ... Updated on Jun 2nd, 2021 7 min...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found