Vue: Need judge styles[transitionProp 'Duration'] is undefined

Created on 13 Jan 2018 · 6Comments · Source: vuejs/vue

Version

2.5.13

Reproduction link

Steps to reproduce

When I run unit test, it shows:
/Users/cb/repo/blade-vue-ui/node_modules/vue/dist/vue.runtime.common.js:6904;
var transitionDurations = styles[transitionProp 'Duration'].split(', ');
TypeError: Cannot read property 'split' of undefined;
I think we need judge styles[transitionProp 'Duration'] is undefined or not.

What is expected?

styles[transitionProp 'Duration'] is defined.

What is actually happening?

styles[transitionProp 'Duration'] is NOT defined.

I FIXED it with those:
var styles = window.getComputedStyle(el);
var transitionDelays = styles[transitionProp 'Delay']? styles[transitionProp 'Delay'].split(', '):[];
var transitionDurations = styles[transitionProp 'Duration']?styles[transitionProp 'Duration'].split(', '):[];
var transitionTimeout = getTimeout(transitionDelays, transitionDurations);
var animationDelays = styles[animationProp 'Delay']?styles[animationProp 'Delay'].split(', '):[];
var animationDurations = styles[animationProp 'Duration']? styles[animationProp 'Duration'].split(', '):[];
var animationTimeout = getTimeout(animationDelays, animationDurations);

Source

niboac

👍2

Most helpful comment

jsdom returns undefined from style instead of empty string.

$ node
> const jsdom = require("jsdom");
undefined
> const { JSDOM } = jsdom;
undefined
> const dom = new JSDOM(`<!DOCTYPE html><p style="color: red;">Hello world</p>`);
undefined
> dom.window.document.querySelector("p").style
CSSStyleDeclaration {
  '0': 'color',
  _values: { color: 'red' },
  _importants: { color: '' },
  _length: 1,
  _onChange: [Function] }
> dom.window.document.querySelector("p").style.color
'red'
> dom.window.document.querySelector("p").style.unexisted
undefined
>

So a solution is to do like that:

(styles[transitionProp + 'Delay'] || '').split(', ')

That's an all fix. I have the same issue and it's very annoying.

industral on 30 May 2018

🎉1 👍1

All 6 comments

Please, make sure to boil down repros to the strict minimal when reporting a bug.
The error looks like you're not providing a transitionDuration for an animation, but it should not fail ever because it all styles are initialized to an empty string by default.
You may want to know there is a forum and a Discord server with a lot of people active, where you can ask questions 🙂

posva on 14 Jan 2018

I made a repros for this bug, https://github.com/niboac/vue-element-test, can you have a look again please, thanks.
Please clone this project then: npm install & npm run unit, it will show the errors. @posva , and when I remove the directive "v-loading", it will have no error.

niboac on 15 Jan 2018

👍1

You still have too many things (like vue-router and element-ui (not sure if it's used though)). Please use the forums or Discord first and come back if you find out it's a bug

posva on 15 Jan 2018

jsdom returns undefined from style instead of empty string.

$ node
> const jsdom = require("jsdom");
undefined
> const { JSDOM } = jsdom;
undefined
> const dom = new JSDOM(`<!DOCTYPE html><p style="color: red;">Hello world</p>`);
undefined
> dom.window.document.querySelector("p").style
CSSStyleDeclaration {
  '0': 'color',
  _values: { color: 'red' },
  _importants: { color: '' },
  _length: 1,
  _onChange: [Function] }
> dom.window.document.querySelector("p").style.color
'red'
> dom.window.document.querySelector("p").style.unexisted
undefined
>

So a solution is to do like that:

(styles[transitionProp + 'Delay'] || '').split(', ')

That's an all fix. I have the same issue and it's very annoying.

industral on 30 May 2018

🎉1 👍1

Seeing this issue all of the sudden on tests running on our CI server. I can't quite explain it or why it just suddenly cropped up. Conditions are basically identical on CI and locally so it doesn't make any sense.

Seems to be intermittent. Rerunning multiple times resulted in a success eventually. Is this a timing bug?