scrollBehavior - Syntax Error: Unexpected token

[awronski]

"nuxt": "^0.10.7"
nuxt.config.js:

router: {
    scrollBehavior: function (to, from, savedPosition) {
      return { x: 0, y: 0 }
    }
  },

gives me:

ERROR  Failed to compile with 1 errors                                                 18:07:50

 error  in ./.nuxt/router.js

Syntax Error: Unexpected token, expected ( (23:32)

  21 |
  22 |
> 23 | const scrollBehavior = function function(to, from, savedPosition) {
     |                                 ^
  24 |       return { x: 0, y: 0 };
  25 |     }
  26 |

Thanks for help,

_{This question is available on Nuxt.js community (#c618)}

[ausir0726]

seems like can't reproduce issue on glitch ( with nuxt.js 0.10.7 )

https://glitch.com/edit/#!/whimsical-badge

can you provide more detail ? or reproduce on glitch ?

[awronski]

@ausir0726 Thanks for your help.

I am using nuxt as middleware (express starter.) When starting the dev the error appear:

c:\dev\client>npm run dev

> ag-client@1.0.0 dev c:\dev\client
> nodemon --exec babel-node -w server.js -w nuxt.config.js -w api/ server.js

[nodemon] 1.11.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: server.js nuxt.config.js api/**/*
[nodemon] starting `babel-node server.js`
Server listening on 127.0.0.1:3003
Build completed in 4.603s

 ERROR  Failed to compile with 1 errors                                                 11:10:36
 error  in ./.nuxt/router.js

Syntax Error: Unexpected token, expected ( (23:32)

  21 |
  22 |
> 23 | const scrollBehavior = function function(to, from, savedPosition) {
     |                                 ^
  24 |       return { x: 0, y: 0 };
  25 |     }

 @ ./.nuxt/index.js 7:0-33
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?reload=true ./.nuxt/client.js

So the problem IMHO is how nuxt generate the router.js.
Here is fragment of generated router.js:

const scrollBehavior = function function(to, from, savedPosition) {
      return { x: 0, y: 0 };
    }

Thanks in advance,

[zhouyu1993]

router: {
        scrollBehavior(to, from, savedPositon) {
            if (to.hash) {
                return {
                    selector: to.hash
                }
            } else if (to.path === from.path) {
                return null
            } else if (savedPositon) {
                return savedPositon
            } else {
                return {
                    x: 0,
                    y: 0
                }
            }
        }
    },

[awronski]

@zhouyu1993 the same error

> 23 | const scrollBehavior = function function(to, from, savedPositon) {
      |                                 ^
  24 |       if (to.hash) {
  25 |         return {

[pi0]

Here is 0.10.7 template for custom scrollBehaviour functions:

<% if (router.scrollBehavior) { %>
const scrollBehavior = <%= serialize(router.scrollBehavior).replace('scrollBehavior(', 'function(') %>
<% } else { %>

Testing against various types of function seems this bug happens only when a function is provided and works with arrow and object members. (https://runkit.com/pi0/591db24aff32a300123e931a)

[awronski]

@pi0 in the meantime could I do anything about it or I just need to wait for the bug fix?

And one more thing. Do you know why the scrolling to the anchor is not working?
here is live example, please click on the 'blog' link.

[pi0]

Currently you can use object syntax it should work as you are currently using :)

router: {
    scrollBehavior (to, from, savedPosition) {
      return { x: 0, y: 0 }
    }
  },

About anchors it seems they should be possible with this commit on vue-router. Maybe we can use such syntax:

<nuxt-link :to="{path:'/blog', hash:'middle'}">Blog</nuxt-link>

Update Workaround not working :D I think we may add some additional work after scrollBehavior to fix it.

[awronski]

@pi0 I tried object syntax already and it is not working. I think this is because babel translate it to normal function anyway.

[pi0]

What about arrow function? () => { }

[awronski]

The same

[awronski]

@pi0 Unfortunetly scroll to anchor is not working too.
This is becouse vue-router is looking for the el before the new page is rendered.

The problem in in the handleScroll function

  router.app.$nextTick(function () {
    var position = getScrollPosition();
    var shouldScroll = behavior(to, from, isPop ? position : null);
    if (!shouldScroll) {
      return
    }
    var isObject = typeof shouldScroll === 'object';
    if (isObject && typeof shouldScroll.selector === 'string') {
      var el = document.querySelector(shouldScroll.selector);    // <<<---------- THIS IS NULL

[atinux]

What's your node version @awronski ?

[awronski]

@atinux
node v7.10.0

what is interesting build is working:
nuxt build && babel server.js --out-file server.prod.js.

but dev is not :(
nodemon --exec babel-node -w server.js -w nuxt.config.js -w api/ server.js

[azorng]

I have the same problem using the nuxt/express template.

[acidjazz]

@atinux @pi0 any update on getting scrollBehavior working? i'm trying to use it in a current project

[dan-gamble]

Also having this on the express template.

Tried it on v6.10.3 and v8.1.4

[songbug1024]

@dan-gamble @awronski @azorvk There is a solution as below:

scrollBehavior: function _scrollBehavior (to, from, savedPosition) {

And it's a general bug when define a function property for nuxt.config.js object such as transition.beforeEnter, the function name _scrollBehavior should be whichever except the same name of the object key scrollBehavior.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.