Nuxt.js: Syntax errors when supplying external function to scrollBehavior key in nuxt.config.js router config

Created on 11 Feb 2019  路  7Comments  路  Source: nuxt/nuxt.js

Version

v2.7.1

Reproduction link

Steps to reproduce

nuxt.config.js

import { scrollBehavior } from './lib/route-utils'

module.exports = {
  // ...
  router: {
    scrollBehavior
  }
  // ...
}

lib/route-utils.js

export function scrollBehavior(to, from, savedPos) {
  // ...
}

When running nuxt dev

ERROR  Failed to compile with 1 errors
ERROR  in ./.nuxt/router.js  friendly-errors 22:51:54
Syntax Error: Unexpected token, expected "(" (34:32)
  32 | Vue.use(Router)
  33 | 
> 34 | const scrollBehavior = function function (to, from, savedPos) {
     |                                 ^
  35 |   const isEqual = require('lodash').isEqual
  36 |   let scrollTo = { x: 0, y: 0 }
  37 |

What is expected ?

Ability to use external functions as scrollBehavior handler

What is actually happening?

Syntax errors listed in steps to repro

Additional comments?

I have updated to Nuxt v2.7.1 and continue to receive errors when attempting to import my scrollBehavior function from an external module.

I tried a yarn upgrade nuxt, tried manually incrementing the version in package.json, verified the newest Nuxt is installed, and even deleted my node_modules folder & reinstalled.

Not certain that #4884 was fully resolved with in PR #4916

This bug report is available on Nuxt community (#c8638)
bug-report pending

Most helpful comment

I don't have much to add other then the fact that I also have the same issue. For what it's worth, I can confirm that the provided sandbox shows the issue very clearly. Not sure whats going on here :/

Thanks for reporting @aaronransley

Maybe useful to know that I just upgraded from 2.34 -> 2.6.2

All 7 comments

Added a proper CodeSandbox reproduction using the official template w/ nuxt @ v2.4.5.

https://codesandbox.io/s/84n4511202?fontsize=14

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

  1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
  2. Comment the steps to reproduce it

Issues that are labeled as 馃晲Pending will not be automatically marked as stale.

I don't have much to add other then the fact that I also have the same issue. For what it's worth, I can confirm that the provided sandbox shows the issue very clearly. Not sure whats going on here :/

Thanks for reporting @aaronransley

Maybe useful to know that I just upgraded from 2.34 -> 2.6.2

This appears to still be happening in 2.8.1 (or reintroduced somewhere in between?)

@Anaphase can you provide an example that fails for you?

Well all I did was add the following to my router config in nuxt.config.js:

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

After tinkering with it a bit, it appears that the syntax errors only happen when I try to use any of the parameters:

Screen Shot 2019-07-03 at 3 24 22 PM

For whatever reason, webpack (or something?) is adding some weird stuff (_666.g.) at the start of any line that uses a function parameter (and not just console.log() statements.)

thanks @Anaphase -- I'll see what's up.

Was this page helpful?
0 / 5 - 0 ratings