JOI email validation

Question

Im using Joi library as standalone validator for my CRA project but when firing email() validator im getting cryptic error

Uncaught Error: Built-in TLD list disabled

Answer 1

From Joi documentation:

By default, the TLD must be a valid name listed on the IANA registry. To disable validation, set tlds to false. To customize how TLDs are validated, set one of these:

allow - one of:

• true to use the IANA list of registered TLDs. This is the default value.
• false to allow any TLD not listed in the deny list, if present.
• a Set or array of the allowed TLDs. Cannot be used together
  with deny.

To disable TLD validation against IANA accepted list:

email: Joi.string().email({ tlds: { allow: false } });

This should disable the validation and allow you to accept any TLD even if it's not IANA registered.

Answer 2

Since version 16.0.0, joi comes with a pre-built minified version for client-side development.

Presumably to save space, that browser build of Joi does not contain the default TLD list.

(See these release notes on the Joi repo: https://github.com/hapijs/joi/issues/2037)

Answer 3

If you are using joi 16.1.1, there are some updates in this version you can see more here docs. I think this would help you

email: Joi.string().email({ minDomainSegments: 2, tlds: { allow: ['com', 'net'] } })

Answer 4

In the docs of v16.0.0 : "The browser build does not include TLD email validation" So, I guess you have to set it to false on the browser

Answer 5

Joi now has a directive in its package.json ('browser') which directs Webpack to use a cut down version of Joi which does not include the TLD list.

To continue using the full version of Joi (with working TLD validation) you need to override the webpack config.

First install Craco, which enables you to override CRA's webpack config.

Then add the following to your craco.config.js:

const path = require('path');

module.exports = {
  webpack: {
    configure: {
      resolve: {
        alias: {
          // ignore the cut down browser distribution that 
          // joi's package.json steers webpack to
          joi: path.resolve(__dirname, 'node_modules/joi/lib/index.js'),
        },
      },
    },
  },
};