Nuxt.js: [2.4.0] [npm] Unexpected token error when running in dev

Created on 28 Jan 2019 · 16Comments · Source: nuxt/nuxt.js

Version

v2.4.0

Reproduction link

https://i-cannot-share-private-repos.com/

Steps to reproduce

Upgrade a codebase to Nuxt 2.4.0.
Run nuxt to build for dev.

What is expected ?

It compiles and builds the web site.

What is actually happening?

It throws an error:

ERROR  in ./.nuxt/router.js                                                                         friendly-errors 12:33:55

Module parse failed: Unexpected token (9:24)                                                         friendly-errors 12:33:55
You may need an appropriate loader to handle this file type.
| 
| var _c67eeace = function _c67eeace() {
>   return interopDefault(import('../pages/about-us.vue'
|   /* webpackChunkName: "pages/about-us" */
|   ));
                                                                                                     friendly-errors 12:33:55
 @ ./.nuxt/index.js 8:0-43 64:19-31
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

Additional comments?

All I did was upgrade using npm install -D [email protected] to get the latest version. Not sure if there are other changes I need to make (nothing was mentioned in the release notes).

_{This bug report is available on Nuxt community (#c8553)}

bug-report

Source

eatyrghost

👍8

Most helpful comment

“ npm should either remove package-lock.json and reinstall before upgrade or use npm update acorn --depth 20 && npm dedupe after upgrading to 2.4.0.“
i remove node_modules, then remove package-lock.json, then update nuxt and reinstall, it's work.
only remove package-lock.json and reinstall it's not useful to me.
hope to help you.

joeyzone on 29 Jan 2019

🎉9 👍4 🚀3

All 16 comments

@eatyrghost Would you please share us (or privatetly) the .nuxt/router.js file?

pi0 on 28 Jan 2019

Here i have the same issue after upgrade. Seems to throw error when parsing first page file.

eskimm on 28 Jan 2019

@pi0 I have the same error:

show code

import Vue from 'vue'
import Router from 'vue-router'
import { interopDefault } from './utils'

const _33982cc5 = () => interopDefault(import('../pages/a.vue' /* webpackChunkName: "pages/a" */))
const _7e89fc82 = () => interopDefault(import('../pages/a/_code.vue' /* webpackChunkName: "pages/a/_code" */))
const _46d39985 = () => interopDefault(import('../pages/a/_code/index.vue' /* webpackChunkName: "pages/a/_code/index" */))
const _29abbac7 = () => interopDefault(import('../pages/a/_code/cc/index.vue' /* webpackChunkName: "pages/a/_code/cc/index" */))
const _b6010c74 = () => interopDefault(import('../pages/a/_code/i/index.vue' /* webpackChunkName: "pages/a/_code/i/index" */))
const _6b71f13e = () => interopDefault(import('../pages/a/_code/s/index.vue' /* webpackChunkName: "pages/a/_code/s/index" */))
const _2e42396c = () => interopDefault(import('../pages/b.vue' /* webpackChunkName: "pages/b" */))
const _c63e0222 = () => interopDefault(import('../pages/b/index.vue' /* webpackChunkName: "pages/b/index" */))
const _16b63ac5 = () => interopDefault(import('../pages/d.vue' /* webpackChunkName: "pages/d" */))
const _4ed33f31 = () => interopDefault(import('../pages/l.vue' /* webpackChunkName: "pages/l" */))
const _2f035343 = () => interopDefault(import('../pages/p.vue' /* webpackChunkName: "pages/p" */))
const _4574e167 = () => interopDefault(import('../pages/p/o.vue' /* webpackChunkName: "pages/p/o" */))
const _1f2bcbfa = () => interopDefault(import('../pages/p/rc/index.vue' /* webpackChunkName: "pages/p/rc/index" */))
const _eb9413de = () => interopDefault(import('../pages/p/rcu.vue' /* webpackChunkName: "pages/p/rcu" */))
const _32997946 = () => interopDefault(import('../pages/p/ts/index.vue' /* webpackChunkName: "pages/p/ts/index" */))
const _20f67cf4 = () => interopDefault(import('../pages/p/rc/_code.vue' /* webpackChunkName: "pages/p/rc/_code" */))
const _34642a40 = () => interopDefault(import('../pages/p/ts/_code.vue' /* webpackChunkName: "pages/p/ts/_code" */))
const _8b2c6680 = () => interopDefault(import('../pages/support.vue' /* webpackChunkName: "pages/support" */))
const _461ede83 = () => interopDefault(import('../pages/index.vue' /* webpackChunkName: "pages/index" */))

Vue.use(Router)

if (process.client) {
  window.history.scrollRestoration = 'manual'
}
const scrollBehavior = function (to, from, savedPosition) {
  // if the returned position is falsy or an empty object,
  // will retain current scroll position.
  let position = false

  // if no children detected and scrollToTop is not explicitly disabled
  if (
    to.matched.length < 2 &&
    to.matched.every(r => r.components.default.options.scrollToTop !== false)
  ) {
    // scroll to the top of the page
    position = { x: 0, y: 0 }
  } else if (to.matched.some(r => r.components.default.options.scrollToTop)) {
    // if one of the children has scrollToTop option set to true
    position = { x: 0, y: 0 }
  }

  // savedPosition is only available for popstate navigations (back button)
  if (savedPosition) {
    position = savedPosition
  }

  return new Promise((resolve) => {
    // wait for the out transition to complete (if necessary)
    window.$nuxt.$once('triggerScroll', () => {
      // coords will be used if no selector is provided,
      // or if the selector didn't match any element.
      if (to.hash) {
        let hash = to.hash
        // CSS.escape() is not supported with IE and Edge.
        if (typeof window.CSS !== 'undefined' && typeof window.CSS.escape !== 'undefined') {
          hash = '#' + window.CSS.escape(hash.substr(1))
        }
        try {
          if (document.querySelector(hash)) {
            // scroll to anchor by returning the selector
            position = { selector: hash }
          }
        } catch (e) {
          console.warn('Failed to save scroll position. Please add CSS.escape() polyfill (https://github.com/mathiasbynens/CSS.escape).')
        }
      }
      resolve(position)
    })
  })
}

export function createRouter() {
  return new Router({
    mode: 'history',
    base: '/',
    linkActiveClass: 'active',
    linkExactActiveClass: 'activeExact',
    scrollBehavior,

    routes: [{
      path: "/a",
      component: _33982cc5,
      name: "a",
      children: [{
        path: ":code?",
        component: _7e89fc82,
        children: [{
          path: "",
          component: _46d39985,
          name: "a-code"
        }, {
          path: "cc",
          component: _29abbac7,
          name: "a-code-cc"
        }, {
          path: "i",
          component: _b6010c74,
          name: "a-code-i"
        }, {
          path: "s",
          component: _6b71f13e,
          name: "a-code-s"
        }]
      }]
    }, {
      path: "/b",
      component: _2e42396c,
      children: [{
        path: "",
        component: _c63e0222,
        name: "b"
      }]
    }, {
      path: "/d",
      component: _16b63ac5,
      name: "d"
    }, {
      path: "/l",
      component: _4ed33f31,
      name: "l"
    }, {
      path: "/p",
      component: _2f035343,
      name: "p",
      children: [{
        path: "o",
        component: _4574e167,
        name: "p-o"
      }, {
        path: "rc",
        component: _1f2bcbfa,
        name: "p-rc"
      }, {
        path: "rcu",
        component: _eb9413de,
        name: "p-rcu"
      }, {
        path: "ts",
        component: _32997946,
        name: "p-ts"
      }, {
        path: "rc/:code?",
        component: _20f67cf4,
        name: "p-rc-code"
      }, {
        path: "ts/:code?",
        component: _34642a40,
        name: "p-ts-code"
      }]
    }, {
      path: "/support",
      component: _8b2c6680,
      name: "support"
    }, {
      path: "/",
      component: _461ede83,
      name: "index"
    }],

    fallback: false
  })
}

ghost on 28 Jan 2019

This is probably related to webpack regression. Please remove yarn.lock / package-lock.json and reinstall. This should fix the problem. (Originally discovered by @manniL few days ago)

Link to the issue: https://github.com/webpack/webpack/issues/8656

Update

Alternative solution:

npm update acorn --depth 20
npm dedupe

pi0 on 28 Jan 2019

👍4

@martymclaughlan @eskimm @eatyrghost for ensuring, as the issue that I mentioned is related to NPM package manager. Do you confirm:

Are you using npm?
Removing lock and reinstall fixed issue?

pi0 on 28 Jan 2019

I also have the same issue. I am using [email protected]. I just removed package.lock and reinstalled packages but the error still persists.

LeCoupa on 28 Jan 2019

👍2

@LeCoupa Would you please also upgrade nuxt?

pi0 on 28 Jan 2019

Upgrading to [email protected] and removing package-lock.json seems to have fixed the issue. But it seems that a module I use nuxt-sass-resources-loader is not working anymore. Don't know if it's related to 2.4.0.

Do we have to use a module like this now?

module.exports = {
  modules: [
    "@nuxtjs/axios",
    "@nuxtjs/dotenv",
    "@nuxtjs/pwa",
    "nuxt-material-design-icons",
    [
      "nuxt-sass-resources-loader",
      [
        // Global variables, site-wide settings, config switches, etc
        "@/assets/settings/_settings.colors.scss",

        // Site-wide mixins and functions
        "@/assets/tools/_tools.mq.scss"
      ]
  ]
}

LeCoupa on 28 Jan 2019

👍4

Upgrading to [email protected] and removing package-lock.json seems to have fixed the issue. But it seems that a module I use nuxt-sass-resources-loader is not working anymore. Don't know if it's related to 2.4.0.

Yeah nuxt-sass-resources-loader is broken for me too now

ghost on 28 Jan 2019

@martymclaughlan @LeCoupa regarding nuxt-sass-resources-loader please open a ticket in the corresponding repository. We will try to review it ASAP. (Ping me please there :D)

pi0 on 28 Jan 2019

PS: Alternative official module is style-resources-module

pi0 on 28 Jan 2019

👍5

Related issue: #4839