Error: Missing property `from`

[LuigiMigliardi93]

Hello, I imported this library via webpack using VueJS when I go into production with SSR I get this error:

Error: Missing property from

if (process.env.VUE_ENV === 'server') {
  if (window.innerWidth > 420) {
    document.querySelectorAll('.element').forEach(function (elem) {
      const modifier = elem.getAttribute('data-modifier')
      self.instances.push(basicScroll.create({
        elem: elem,
        from: 'bottom-bottom',
        to: 'middle-top',
        direct: true,
        props: {
          '--translateY': {
            from: '0px',
            to: `-${ 5 * modifier }px`
          }
        }
      }))
    })
  }
}

The property from exist, why I get this error?

Thanks, Luigi

[GA-MO]

I got same issue

[LuigiMigliardi93]

@electerious please help us.

[GA-MO]

@LuigiMigliardi93 I use file main.js in src it is work!

[LuigiMigliardi93]

@GA-MO explain me please.

[electerious]

The code looks fine so it's hard to say what's wrong here. Can you replace basicScroll.min.js with the following file and send me the console output?

basicScroll.min.js.zip

[LuigiMigliardi93]

please send me this object

{
  elem: div.col-md-6.d-none.d-md-block.element,
  from: "bottom-bottom",
  to: "middle-top",
  direct: true,
  props: {…}
}

and this object

{
  elem: undefined,
  from: undefined,
  to: undefined,
  direct: undefined,
  props: undefined
}

[electerious]

I'm using clonedeep from lodash to avoid changes by reference. It looks like it returns the same object but without values. This is interesting…

[LuigiMigliardi93]

@electerious why is it without values?

[electerious]

That's the question. Is there a repo I can use to reproduce the issue?

[nicolasmn]

I have the same issue using create-react-app. While in dev mode the script runs just fine, however when doing a build, the script throws this error.

[mikirobles]

Got the same issue using bower + this gulp setting:

gulp.task('scripts:bower', () =>
  gulp.src(mainBowerFiles({filter: '**/*.js'}))
    .pipe($.concat('vendor.js'))
    .pipe($.uglify())
    .pipe(gulp.dest(destScripts))
    .pipe(browsersync.stream())
);

Edit: Managed to fix it by switching to gulp-uglify-es

[electerious]

I've replaced clonedeep with Object.assign. basicScroll is now almost 50% smaller and v3.0 should hopefully fix this issue. Would be great if someone could give it a try :)

[electerious]

Closing this issue because it should be fixed in v3.0.