Joi: Error: Invalid undefined schema

[veronicapc92]

Support plan

• which support plan is this issue covered by? (e.g. Community, Core, Plus, or Enterprise): Community
• is this issue currently blocking your project? (yes/no): no
• is this issue affecting a production system? (yes/no): no

Context

• node version: 12.16.1
• module version: 17.1.1
• environment (e.g. node, browser, native): browser
• used with (e.g. hapi application, another framework, standalone, ...): React.js
• any other relevant information: no

How can we help?

I was using joi in my React project but given it's deprecated I have now installed @hapi/joi. I changed the code in the form validation method of my application to adapt it to the @hapi/joi guidelines and it works. However when changing the code for the input validation method I get the following error in the browser: "Invalid undefined schema".

My previous code (using joi) was :

validateProperty = ({ name, value }) => {
const obj = { [name]: value };
const schema = { [name]: this.schema[name] };
const { error } = Joi.validate(obj, schema);
return error ? "This field is required" : null;
};

My current code (using @hapi/joi) is:

validateProperty = ( { name, value } ) => {
    const obj = { [name]: value };
    const schema = Joi.object({ [name]: this.schema[name] });
    const { error } = schema.validate(obj);
    return error ? "This field is required" : null;
  };

Can anyone please help me with this?

Many thanks!

[Marsup]

The part with this.schema[name] returns undefined, this is not valid for a schema.

[veronicapc92]

thanks @Marsup !

Is there any workaround to this? What can I do to be able to validate individual inputs dinamically? I was able to use this.schema[name] in my previous code using joi.

[Marsup]

I don't know what else changed in your code but this never worked as far as I can remember. If I were you I'd look for a reason why this is suddenly undefined rather than trying to make it work with it, but I don't know what this.schema is.

[veronicapc92]

@Marsup I have a React class called SignIn where I declared schema. Then I created a method inside of that class called validateProperty. In order to be able to access schema from this method I used this.schema.

The schema I declared in the SignIn class looks like this:

schema = Joi.object({
    email: Joi.string()
      .required()
      .email({ minDomainSegments: 2, tlds: { allow: false } })
      .label("E-mail"),
    password: Joi.string()
      .required()
      .pattern(new RegExp("^[a-zA-Z0-9]{6,16}$"))
      .label("Password"),
  });

[Marsup]

Wasn't it a pure object before? Because it has never been an option to access sub-schemas with a pattern like schema[key]. You need to use extract for that.

[veronicapc92]

@Marsup thanks for the quick reply. It's strange because when I first built the form validation part of my project I was following a tutorial that uses the deprecated version of joi and the person uses schema[key]. That's why I thought it was weird that the code wasn't working anymore when I changed to @hapi/joi. See the screenshot of his code below:

Anyway I will check my code again to understand what happened. I didn't know about "extract", thanks for letting me know, that will help me!

[Marsup]

I'll close this as I think the problem is clear now, ping me again if it doesn't work.

[devtarek]

This smells a little bit like Mosh's tutorial ... if so, the solution would be:

validateProperty = ({ name, value }) => {
const propertyToValidate = { [name]: value };

const schemaOfProperty = Joi.object({ [name]: this.schema.extract(name) });

const { error } = schemaOfProperty.validate(propertyToValidate);
return error ? error.details[0].message : null;

};

[dsteegen]

@devtarek

What a coincidence. I am also following Mosh's React course at this very moment. Because of the outdated Joi library, I migrated to hapijs/joi and stumbled upon this issue. Your suggestion works perfect 👍

[veronicapc92]

that's exactly it, Mosh's tutorial! 😊 thanks @devtarek