Nuxt.js: Error in ./.nuxt/router.js

[Skriptach]

Version

v2.3.4

Reproduction link

http://itstoobig.code

Steps to reproduce

I'm trying to migrate Nuxt from 1.4.2 to current latest 2.3.4. I went through migration instruction steps. But still getting build error

Actual ./.nuxt/router.js content of that part:

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

const _495307ce = () => interopDefault(import('../pages/account/index.vue' /* webpackChunkName: "pages/account/index" */))
const _39025db0 = () => interopDefault(import('../pages/banners.vue' /* webpackChunkName: "pages/banners" */))
const _df2f0e94 = () => interopDefault(import('../pages/brands/index.vue' /* webpackChunkName: "pages/brands/index" */))
const _7e887586 = () => interopDefault(import('../pages/categories/index.vue' /* webpackChunkName: "pages/categories/index" */))
const _16d506f9 = () => interopDefault(import('../pages/coupons/index.vue' /* webpackChunkName: "pages/coupons/index" */))
...

nuxt.config.js:

import dotenv from 'dotenv'
import { PROXY, WS_URL, head, manifest } from './config'

dotenv.config();

export default {
    mode: 'spa',
    head, manifest,
    loading: '~/components/LoadingBar.vue',
    css: [
        'vuetify/src/stylus/main.styl',
        '~/assets/main.css',
        '~/assets/transitions.css',
        '~/assets/fonts/Elegant-Garamond-Regular.css',
    ],
    plugins: [
        '~/plugins/html51.js',
        '~/plugins/axios.js',
        '~/plugins/socket.js',
        '~/plugins/vuetify.js',
        '~/plugins/filters.js',
        '~plugins/social.js',
        { src: '~/plugins/lazy.js' },
        { src: '~/plugins/validate.js' },
        { src: '~/plugins/scroll.js', ssr: false },
        { src: '~/plugins/line-chart.js', ssr: false },
        { src: '~/plugins/i18n.js', ssr: false },
        { src: '~/plugins/sweetalert2.js', ssr: false },
        { src: '~plugins/maps.js', ssr: false }
    ],
    modules: [
        '@nuxtjs/axios',
        '@nuxtjs/dotenv',
    ],
    axios: {
        proxy: true,
        credentials: true,
    },
    proxy: {
        '/api': PROXY,
        '/auth': PROXY
    },
    generate: {
        dir: 'dist/public'
    },
    workbox: {
        runtimeCaching: [
            {
                urlPattern: PROXY + '/groceries/.*',
                handler: 'cacheFirst',
                method: 'GET',
                strategyOptions: { cacheableResponse: { statuses: [0, 200] } }
            },
            {
                urlPattern: 'https://fonts.googleapis.com/.*',
                handler: 'cacheFirst',
                method: 'GET',
                strategyOptions: { cacheableResponse: { statuses: [0, 200] } }
            },
            {
                urlPattern: 'https://fonts.gstatic.com/.*',
                handler: 'cacheFirst',
                method: 'GET',
                strategyOptions: { cacheableResponse: { statuses: [0, 200] } }
            }
        ]
    },
    router: {
        middleware: ['init-app'] // Should be called on every page request.
    },

    /*
    ** Build configuration
    */
    build: {
        /*
        ** You can extend webpack config here
        */
        extend(config, ctx) {
            if (ctx.isServer) {
                config.externals = [
                    nodeExternals({
                        whitelist: [/^vuetify/]
                    })
                ]
                // This instructs Webpack to include `vue2-google-maps`'s Vue files
                // for server-side rendering
                config.externals.splice(0, 0, function (context, request, callback) {
                    if (/^vue2-google-maps($|\/)/.test(request)) {
                        callback(null, false)
                    } else {
                        callback()
                    }
                })
            }
        }
    },
    env: {
        WS_URL: WS_URL || PROXY, // This will allow us to configure plugins/socket.js
        PROXY: PROXY
    }
}

tsconfig.js

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/server",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "noEmitHelpers": true,
    "importHelpers": true,
    "strictNullChecks": false,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ],
    "types": [
      "hammerjs",
      "node"
    ]
  },
  "exclude": [
    "node_modules",
    "dist"
  ],
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true
  },
  "buildOnSave": false
}

node version: 10.15.0
npm version: 6.6.0

What is expected ?

Build without errors

What is actually happening?

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

[pehlse]

I was with the same problem, I decided to install the dependencies with yarn and it worked

[manniL]

It's an NPM bug and not related to nuxt.

Use yarn in the meantime :relaxed:

More info:
https://github.com/webpack/webpack/issues/8656

[aaaguirrep]

Hi,
Can i have npm and yarn installed simultaneously?

[manniL]

Sure

[koresar]

I encounter the same error in v2.4.0. Although, we can't go yarn as a team. This bug isn't yet "resolved" as to me.

[manniL]

@koresar

1. It is not a Nuxt bug at all. The only reason why this issue is still open is for visibility
2. You can resolve it with NPM as well (read the linked Webpack bug)
3. It's "resolved" as there is a workaround :relaxed:

[koresar]

My apologies @manniL. I should have paid better attention. Thank you for keeping it open.

For all the other _"I don't have time to read all the comments. Give me the fix"_ people like me here is the workaround (until npm fixes their thing).

rm -rf node_modules package-lock.json
npm i
npm update acorn --depth 20
npm dedupe

[manniL]

@koresar No problem :relaxed:

We also added that to the release notes (over at https://github.com/nuxt/nuxt.js/releases/tag/v2.4.0) :raised_hands:

[fbrbovic]

For anyone else who might be in same situation. I've tried various combinations of the above mentioned commands and none of them work for my setup. If you tried all the above and still having the same error try the following.
This is the one that worked for me.

rm -rf node_modules package-lock.json
# you may or may not need to do a full npm cache clean - I did in my case
npm cache clean --force
npm install [email protected] --save-dev --save-exact
npm install [email protected] --save-dev
npm install [email protected] --save-dev
npm i
npm update acorn --depth 20
npm dedupe

[seth100]

For anyone else who might be in same situation. I've tried various combinations of the above mentioned commands and none of them work for my setup. If you tried all the above and still having the same error try the following.
This is the one that worked for me.

rm -rf node_modules package-lock.json
# you may or may not need to do a full npm cache clean - I did in my case
npm cache clean --force
npm install [email protected] --save-dev --save-exact
npm install [email protected] --save-dev
npm install [email protected] --save-dev
npm i
npm update acorn --depth 20
npm dedupe

thanks that worked to me.
But when the bug will be solved by Webpack team, should I remove those acorn-dynamic-import, acorn and update webpack to latest version or what?

Thanks

[manniL]

Clsing here and pinned the bug until https://github.com/npm/cli/pull/147 is merged and released

More info:
https://github.com/webpack/webpack/issues/8656

[nusendra]

Yarn will solve your problem

[williamchong]

FYI npm is reverting their fix https://github.com/npm/cli/pull/152

[manastalukdar]

This issue also occurred on upgrading to nuxt 2.5.1 from 2.4.3, mitigated by outlined workaround.