search

mattrothenberg / vue-overdrive

Super easy magic-move transitions for Vue apps
684 stars 30 forks source link

TypeError: Cannot read property '2' of null #13

Closed andycodesstuff closed 5 years ago

andycodesstuff commented 5 years ago

Expected Behavior

The overdrive component should morph the given elements

Actual Behavior

[Vue warn]: Error in nextTick: "TypeError: Cannot read property '2' of null"

found in

---> <Overdrive>
       <Home> at src/views/Home.vue
         <App> at src/App.vue
           <Root>

stack trace:

TypeError: Cannot read property '2' of null
    at p (overdrive.js?d986:4)
    at t.init (overdrive.js?d986:4)
    at new t (overdrive.js?d986:4)
    at Object.t.transform (overdrive.js?d986:4)
    at VueComponent.animate (overdrive.js?d986:6)
    at VueComponent.eval (overdrive.js?d986:6)
    at Array.eval (vue.runtime.esm.js?2b0e:1916)
    at flushCallbacks (vue.runtime.esm.js?2b0e:1835)

Steps to Reproduce the Problem

  1. I have created a new VueJS project via @vue/cli using the following configurations: 1.1. Manually select features 1.2. I selected: Babel, TypeScript, Router, Vuex, CSS Pre-processors and Linter / Formatter 1.3. Use class-style component syntax? Y 1.4. Use Babel alongside TypeScript for auto-detected polyfills? Y 1.5. Use history mode for router? Y 1.6. I picked SASS/SCSS pre-processor 1.7. I picked TSLint for linting and removed any selection in the next option 1.8. Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
  2. I installed vue-overdrive with npm install --save vue-overdrive
  3. The code is available at https://github.com/andrycodestuffs/vue-overdrive-test

N.B. When building the project (for development or production) the following warning shows up:

 warning  in ./node_modules/vue-overdrive/dist/overdrive.js

Critical dependency: the request of a dependency is an expression

Specifications

andycodesstuff commented 5 years ago

All of the error related code that I created to test this scenario is contained in the commit named "vue-overdrive test" (the latest one)

mattrothenberg commented 5 years ago

@andrycodestuffs Thanks for reporting these issues.

As for the warning you mentioned, I'm honestly not sure what's causing that. I'll have to do some investigating.

As for the TypeError, there's actually an open issue with Ramjet (the library I'm using under the hood for animations) where you can't tween percentage based border radii: https://github.com/Rich-Harris/ramjet/issues/57. Change border-radius: 100%; to a pixel value and it should work 😅

mattrothenberg commented 5 years ago

Quick update. I just scaffolded a vue-cli project, added vue-overdrive, and I'm not seeing that warning (Critical dependency: the request of a dependency is an expression). Could this be related to another dependency in your project?

andycodesstuff commented 5 years ago

You were right! The error was caused by the percentage-based border radii, sorry for bothering. Speaking about the warning, vue-overdrive is the only dependency that I installed after creating the project and I can confirm that the warning comes from it. I'll do some research about it and if it's a vue-overdrive related issue I will let you know

mattrothenberg commented 5 years ago

Don't be sorry, that's totally my fault for not calling that out. I've added a note to the README so that others don't fall in the same trap.

Please do let me know if you find anything re: that warning. I welcome PRs ❤️

andycodesstuff commented 5 years ago

I tried the latest version of vue-overdrive on Windows 10 with the same result (the dependency is an expression warning), this time I created a new Vue project using the same configs as before and just imported vue-overdrive with the following line: (to be sure that it was the real cause of the warning)

import Overdrive from 'vue-overdrive'

My setup:

I'm going to deeply investigate the question and propose any solutions that I can find

andycodesstuff commented 5 years ago

I made some progresses. I cloned the repo and used vue-overdrive directly by importing the files in the test app and I noticed one thing: the warning doesn't appear when you import the "uncompiled" development version of vue-overdrive that is:

import Overdrive from 'path/to/vue-overdrive-repo/src'

But it pops up when you import the production version (of course) so it may be related with Parcel bundling options