[2.4.0] [npm] Unexpected token error when running in dev #4869

eatyrghost · 2019-01-28T18:38:34Z

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 nuxt@2.4.0 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)}

The text was updated successfully, but these errors were encountered:

pi0 · 2019-01-28T19:09:30Z

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

eskimm · 2019-01-28T19:28:19Z

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

ghost · 2019-01-28T19:29:31Z

@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
  })
}

pi0 · 2019-01-28T19:33:17Z

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: webpack/webpack#8656

Update

Alternative solution:

npm update acorn --depth 20
npm dedupe

pi0 · 2019-01-28T19:38:37Z

@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?

LeCoupa · 2019-01-28T19:44:56Z

I also have the same issue. I am using nuxt@2.3.4. I just removed package.lock and reinstalled packages but the error still persists.

pi0 · 2019-01-28T19:46:07Z

@LeCoupa Would you please also upgrade nuxt?

LeCoupa · 2019-01-28T19:52:38Z

Upgrading to nuxt@2.4.0 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"
      ]
  ]
}

ghost · 2019-01-28T19:53:40Z

Upgrading to nuxt@2.4.0 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

pi0 · 2019-01-28T19:56:52Z

@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 · 2019-01-28T20:09:05Z

PS: Alternative official module is style-resources-module

manniL · 2019-01-28T20:30:01Z

Related issue: #4839

pi0 · 2019-01-28T20:38:33Z

Closing as there is a related open issue ( #4839 ) and problem added to release notes.

joeyzone · 2019-01-29T06:11:01Z

“ 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.

samirph · 2019-01-31T22:17:05Z

@joeyzone You are a lifesaver! None of the previous steps worked for me either.

joeyzone · 2019-02-02T02:06:00Z

@joeyzone You are a lifesaver! None of the previous steps worked for me either.

happy to help you.

ghost added the cmty:bug-report label Jan 28, 2019

pi0 changed the title ~~Unexpected token error when running in dev~~ [2.4.0] Unexpected token error when running in dev Jan 28, 2019

pi0 changed the title ~~[2.4.0] Unexpected token error when running in dev~~ [2.4.0] [npm] Unexpected token error when running in dev Jan 28, 2019

LeCoupa mentioned this issue Jan 28, 2019

Package seems to be broken with nuxt 2.4.0 anteriovieira/nuxt-sass-resources-loader#25

Closed

pi0 closed this as completed Jan 28, 2019

danielroe added 2.x pending triage labels Jan 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[2.4.0] [npm] Unexpected token error when running in dev #4869

[2.4.0] [npm] Unexpected token error when running in dev #4869

eatyrghost commented Jan 28, 2019

pi0 commented Jan 28, 2019

eskimm commented Jan 28, 2019

ghost commented Jan 28, 2019 •

edited by pi0

pi0 commented Jan 28, 2019 •

edited

pi0 commented Jan 28, 2019 •

edited

LeCoupa commented Jan 28, 2019

pi0 commented Jan 28, 2019 •

edited

LeCoupa commented Jan 28, 2019 •

edited

ghost commented Jan 28, 2019

pi0 commented Jan 28, 2019 •

edited

pi0 commented Jan 28, 2019

manniL commented Jan 28, 2019

pi0 commented Jan 28, 2019

joeyzone commented Jan 29, 2019 •

edited

samirph commented Jan 31, 2019

joeyzone commented Feb 2, 2019

[2.4.0] [npm] Unexpected token error when running in dev #4869

[2.4.0] [npm] Unexpected token error when running in dev #4869

Comments

eatyrghost commented Jan 28, 2019

Version

Reproduction link

Steps to reproduce

What is expected ?

What is actually happening?

Additional comments?

pi0 commented Jan 28, 2019

eskimm commented Jan 28, 2019

ghost commented Jan 28, 2019 • edited by pi0

pi0 commented Jan 28, 2019 • edited

pi0 commented Jan 28, 2019 • edited

LeCoupa commented Jan 28, 2019

pi0 commented Jan 28, 2019 • edited

LeCoupa commented Jan 28, 2019 • edited

ghost commented Jan 28, 2019

pi0 commented Jan 28, 2019 • edited

pi0 commented Jan 28, 2019

manniL commented Jan 28, 2019

pi0 commented Jan 28, 2019

joeyzone commented Jan 29, 2019 • edited

samirph commented Jan 31, 2019

joeyzone commented Feb 2, 2019

ghost commented Jan 28, 2019 •

edited by pi0

pi0 commented Jan 28, 2019 •

edited

pi0 commented Jan 28, 2019 •

edited

pi0 commented Jan 28, 2019 •

edited

LeCoupa commented Jan 28, 2019 •

edited

pi0 commented Jan 28, 2019 •

edited

joeyzone commented Jan 29, 2019 •

edited