Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Destructuring bug when using non-latin chars #9632

Closed
SnirShechter opened this Issue Mar 4, 2019 · 4 comments

Comments

Projects
None yet
5 participants
@SnirShechter
Copy link

SnirShechter commented Mar 4, 2019

Bug Report

Current Behavior
App throws an error 'Cannot read property '1' of null' when input ('selector' variable) is of non-latin chars only (error is on lines 6-7 in the code below).

  • Non-transpiled version of the function works fine.

  • Transpiled version is expecting .match (line 6) to return an array, but when the selector is comprised of non-latin chars, it returns null (e.g 'Цвет').

  • Seems like the problem is in the destructuring of the parseSelector() return value (see screenshot below).

Input Code
Repo:
https://github.com/baianat/vee-validate

the problem is in the transpiled version of _makeCandidateFilters found here https://github.com/baianat/vee-validate/blob/master/src/core/errorBag.js

Transpiled version of the function:

ErrorBag.prototype._makeCandidateFilters = function _makeCandidateFilters (selector) {
  var matchesRule = function () { return true; };
  var matchesScope = function () { return true; };
  var matchesName = function () { return true; };

  var ref = selector.match(/((?:[\w-\s])+\.)?((?:[\w-.*\s])+)(:\w+)?/);
    var scope = ref[1]; // <--- ERROR HAPPENS HERE
    var name = ref[2];
    var rule = ref[3];
  if (rule) {
    rule = rule.replace(':', '');
    matchesRule = function (item) { return item.rule === rule; };
  }

  // match by id, can be combined with rule selection.
  if (selector.startsWith('#')) {
    return {
      isPrimary: function (item) { return matchesRule(item) && (function (item) { return selector.slice(1).startsWith(item.id); }); },
      isAlt: function () { return false; }
    };
  }

  if (isNullOrUndefined(scope)) {
    // if no scope specified, make sure the found error has no scope.
    matchesScope = function (item) { return isNullOrUndefined(item.scope); };
  } else {
    scope = scope.replace('.', '');
    matchesScope = function (item) { return item.scope === scope; };
  }

  if (!isNullOrUndefined(name) && name !== '*') {
    matchesName = function (item) { return item.field === name; };
  }

  // matches the first candidate.
  var isPrimary = function (item) {
    return matchesName(item) && matchesRule(item) && matchesScope(item);
  };

  // matches a second candidate, which is a field with a name containing the '.' character.
  var isAlt = function (item) {
    return matchesRule(item) && item.field === (scope + "." + name);
  };

  return {
    isPrimary: isPrimary,
    isAlt: isAlt
  };
};

Expected behavior/code
Function should work fine with non-latin chars.

Babel Configuration (.babelrc, package.json, cli command)
The default config for nuxt.js (found here - https://github.com/nuxt/nuxt.js/blob/dev/packages/babel-preset-app/src/index.js)

Environment

  • Babel version(s): 6.26.3
  • Node/npm version: Node 10
  • OS: Windows 10
  • Monorepo: no
  • How you are using Babel: loader

Additional context/Screenshots
The error
image

Non transpiled version of the function(only the first few lines)
image

@babel-bot

This comment has been minimized.

Copy link
Collaborator

babel-bot commented Mar 4, 2019

Hey @SnirShechter! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community
that typically always has someone willing to help. You can sign-up here
for an invite.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Mar 4, 2019

Where does that regex come from? It should be var ref = parseSelector(selector).
Also rule = rule.replace(':', ''); seems to appear from nowhere?

If I build your project, I see this output:

  ErrorBag.prototype._makeCandidateFilters = function _makeCandidateFilters (selector) {
      var this$1 = this;

    var matchesRule = function () { return true; };
    var matchesScope = function () { return true; };
    var matchesName = function () { return true; };
    var matchesVM = function () { return true; };

    var ref = parseSelector(selector);
      var id = ref.id;
      var rule = ref.rule;
      var scope = ref.scope;
      var name = ref.name;

    if (rule) {
      matchesRule = function (item) { return item.rule === rule; };
    }

    // match by id, can be combined with rule selection.
    if (id) {
      return {
        isPrimary: function (item) { return matchesRule(item) && (function (item) { return id === item.id; }); },
        isAlt: function () { return false; }
      };
    }

    if (isNullOrUndefined(scope)) {
      // if no scope specified, make sure the found error has no scope.
      matchesScope = function (item) { return isNullOrUndefined(item.scope); };
    } else {
      matchesScope = function (item) { return item.scope === scope; };
    }

    if (!isNullOrUndefined(name) && name !== '*') {
      matchesName = function (item) { return item.field === name; };
    }

    if (!isNullOrUndefined(this.vmId)) {
      matchesVM = function (item) { return item.vmId === this$1.vmId; };
    }

    // matches the first candidate.
    var isPrimary = function (item) {
      return matchesVM(item) && matchesName(item) && matchesRule(item) && matchesScope(item);
    };

    // matches a second candidate, which is a field with a name containing the '.' character.
    var isAlt = function (item) {
      return matchesVM(item) && matchesRule(item) && item.field === (scope + "." + name);
    };

    return {
      isPrimary: isPrimary,
      isAlt: isAlt
    };
  };
@Qantas94Heavy

This comment has been minimized.

Copy link
Member

Qantas94Heavy commented Mar 14, 2019

Are you accidentally getting some old version of the code? The selector regex is no longer used in vee-validate: baianat/vee-validate@4fa73d8

@danez

This comment has been minimized.

Copy link
Member

danez commented Mar 17, 2019

No matter if the destructuring is transpiled or not if you try to destruct from null it is also an error.

var { a, b, c } = null;
Uncaught TypeError: Cannot destructure property `a` of 'undefined' or 'null'.
var ref = null;
var a = ref[0];
Uncaught TypeError: Cannot read property '0' of null

(Both tested in latest Chrome)

So the case where the input is null needs to be handled in the code. We cannot do anything here, babel is working correctly.

But as the others mentioned it seems the code was already modified, so you probably only need to update vee-validate.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.