updating to 2.1.0-beta.11 from 2.0.9 for nuxt fails with Cannot read property 'i18nDriver' of undefined

Versions

• vee-validate: 2.1.0-beta-11
• vue: 2.5.17
• nuxt 1.4.2

Describe the bug Nuxt build fails with error Cannot read property 'i18nDriver' of undefined

To Reproduce Steps to reproduce the behavior:

1. update vee-validate to 2.1.0-beta.11 from 2.0.9
2. (be sure to clear node_modules to remove cache of 2.0.9)
3. rerun nuxt build/ nuxt

Expected behavior Nuxt should build properly.

[favoyang]

As logaretm said, You need to defer any rule extending/localization until vee-validate is installed. For example

// wrong
Validator.localize('ar', ar);
Vue.use(VeeValidate);

// correct
Vue.use(VeeValidate);
Validator.localize('ar', ar);

[logaretm]

Sorry for the inconvenience, From the release notes:

The installation method for vee-validate has been updated to be more future-proof and as such it introduces a new caveat, you now need to install the plugin before attempting to use its features like Validator.extend. This is usually trivial and shouldn’t affect most setups.

tldr; Make sure you are calling Vue.use(VeeValidate); before interacting with vee-validate.

You need to defer any rule extending/localization until vee-validate is installed. I will try to see if it can be avoided/deferred by the plugin in the next release.

Here is a small snippet of a before/after of vee-validate.js plugin for some of our nuxt.js projects:

// This would fail.
import Vue from 'vue';
import VeeValidate from 'vee-validate';
import { IsEmailTaken } from '~/graphql/auth.gql';

// Extending before calling Vue.use
VeeValidate.Validator.extend('unique_email', {
  getMessage (field) {
    return `email is already taken.`;
  },
  async validate(value, [exception] = []) {
    const { data } = await Vue.$api.query({
      query: IsEmailTaken,
      variables: { email: value, exception }
    });

    return {
      valid: !data.isEmailTaken,
      data: { email: value }
    };
  }
});

let installed = false;
let localized = { en: false, ar: false };

// export a function since we want access to i18n instance.
export default ({ app }) => {
  if (!installed) {
    Vue.use(VeeValidate, {
      inject: false,
      i18n: app.i18n
    });
    installed = true;
  }

  const locale = app.i18n.locale;

  // skip if already localized.
  if (localized[locale]) return;

  // dynamically load a vee-validate locale
  return import(`vee-validate/dist/locale/${locale}`).then(localeObj => {
    VeeValidate.Validator.localize({ [locale]: localeObj });
    localized[locale] = true;
  });
};

// refactored into this, works!
import Vue from 'vue';
import VeeValidate from 'vee-validate';
import { IsEmailTaken } from '~/graphql/auth.gql';

// wrapped into a function.
function installRules () {
  VeeValidate.Validator.extend('unique_email', {
    getMessage(field) {
      return `email is already taken.`;
    },
    async validate(value, [exception] = []) {
      const { data } = await Vue.$api.query({
        query: IsEmailTaken,
        variables: { email: value, exception }
      });

      return {
        valid: !data.isEmailTaken,
        data: { email: value }
      };
    }
  });
}

let installed = false;
let localized = { en: false, ar: false };


export default ({ app }) => {
  if (!installed) {
    Vue.use(VeeValidate, {
      inject: false,
      i18n: app.i18n
    });
    // extend the rules after vee-validate is installed.
    installRules();
    installed = true;
  }

  const locale = app.i18n.locale;

  // skip if already localized.
  if (localized[locale]) return;

  // dynamically load a vee-validate locale
  return import(`vee-validate/dist/locale/${locale}`).then(localeObj => {
    VeeValidate.Validator.localize({ [locale]: localeObj });
    localized[locale] = true;
  });
};