Nuxt.js: [2.4.0] Update breaks nested page loading

[mauxtin]

Version

v2.4.0

Reproduction link

https://codesandbox.io/s/7mowyo1vnj

Steps to reproduce

After upgrading to 2.4.0 using yarn I get the following error:

 ERROR  Failed to compile with 1 errors                                                                                                                                             friendly-errors 00:37:35

This dependency was not found:                                                                                                                                                      friendly-errors 00:37:35
                                                                                                                                                                                    friendly-errors 00:37:35
* ..\pages\user\login.vue in ./.nuxt/router.js                                                                                                                                      friendly-errors 00:37:35
                                                                                                                                                                                   friendly-errors 00:37:35
To install it, you can run: npm install --save ..\pages\user\login.vue                                                                                                              friendly-errors 00:37:35

I have to say that the page in the error changes every time but is always a nested one.

router.js

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

const _3c4810c7 = () => interopDefault(import('..\\pages\\about.vue' /* webpackChunkName: "pages_about" */))
const _390705aa = () => interopDefault(import('..\\pages\\blog\\index.vue' /* webpackChunkName: "pages_blog_index" */))
const _9f25118c = () => interopDefault(import('..\\pages\\Contact.vue' /* webpackChunkName: "pages_Contact" */))
const _42e82e10 = () => interopDefault(import('..\\pages\\user\\login.vue' /* webpackChunkName: "pages_user_login" */))
const _66626178 = () => interopDefault(import('..\\pages\\user\\profile.vue' /* webpackChunkName: "pages_user_profile" */))
const _45912ae4 = () => interopDefault(import('..\\pages\\user\\reset\\index.vue' /* webpackChunkName: "pages_user_reset_index" */))
(...)

I tried deleting the .nuxt, .node_modules and yarn.lock and run yarn install && yarn run dev but the error persists.

What is expected ?

Nested routes to work as they used to in prior versions

What is actually happening?

They don't work. I get "This dependency was not found" instead.

Additional comments?

I will try to create a reproduction repo in the next couple of days, unless someone else does. I tried to use CodeSandbox to create one but I think it fails due to a different reason (a codesandbox problem I believe - error: Cannot find module './components/nuxt-link.server.js').

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

[manniL]

Are you sure that this isn't related to #4839?

[mauxtin]

Are you sure that this isn't related to #4839?

I am not but that one seems only related to npm. I am using yarn

[mauxtin]

If anyone feels like checking this out I can share my private repo. (I haven't made any changes other than removing node_modules and yarn.lock so the problem should be related to 2.4.0 I believe)

[manniL]

Strange. Can't reproduce that on CSB.

https://codesandbox.io/s/github/manniL/nuxt-4873/tree/master/

1. Go for /users/a
2. See text

Try to remove your yarn lock and re-build your modules.

[mauxtin]

Already tried that without luck. I will try to reproduce the error in a new installation soon.

[manniL]

@mauxtin Great! Please ping back if you think it's a Nuxt issue.

[cayaner]

I can confirm this nested routes broke after upgrade.

[cayaner]

Update,
This issue happens only with yarn for me, try npm i

[mauxtin]

I just tried with npm and got the error regeneratorRuntime is not defined. It seems like something is wrong with my babel dependencies

[mauxtin]

Not sure why but yarn add vue-loader fixes the first issue with yarn, although I checked the yarn.lock and the dependency was already present. Not sure why explicitly installing it fixes the issue.

Now I am getting regeneratorRuntime is not defined with both npm and yarn

[manniL]

@mauxtin that sounds like a babel issue

[pi0]

@mauxtin Lock file tries it's best to reduce changes when updating a single dependency. In case of nuxt upgrade, i recommend to always remove and create lock file :)

[mauxtin]

@mauxtin Lock file tries it's best to reduce changes when updating a single dependency. In case of nuxt upgrade, i recommend to always remove and create lock file :)

Yeah, I already tried removing the yarn.lock and reinstalling with no effect.

I also tried to build the project and run yarn run start and everything seemed to worked fine. Must be something with the babel dev dependencies..

[mauxtin]

I managed to pinpoint the problem in my nuxt.config.js > build and specifically in this section.

  babel: {
    presets: [
      [
        '@nuxt/babel-preset-app',
        {
          targets: { ie: 11 }
        }
      ]
    ],
    plugins: ['@babel/plugin-syntax-dynamic-import']
  }

Removing the presets array solves my problem. Any ideas what would be the problem with it?

[manniL]

@mauxtin probably because the target for node/the server side is not present. https://github.com/nuxt/nuxt.js/blob/dev/packages/babel-preset-app/src/index.js#L53

[mauxtin]

@manniL I am confused. Is my config wrong or is this is a bug?

I tried to add the node as you mentioned (if I understood correctly) and set it to 'current' based on what is mentioned in the docs but the error persists.

targets: {
    ie: 11,
    node: 'current'
}

[manniL]

@mauxtin

1. You can't really do something there at the moment. @nuxt/babel-preset-app should accept a function for targets. This was implemented at first but vanished. it's on our todo list.
   I suggest keeping the targets "as is" as the default is transpilation back to IE9.
   You can use modern mode to improve perf for evergreen browsers.

[clarkdo]

Let's track the issue in #4900

[PrimozRome]

Not sure if this is a related issue or not but I have this issue after upgrading to 2.4.2. What to do?

 ERROR  Failed to compile with 1 errors                                                                                                                                          friendly-errors 21:39:22


 ERROR  in ./.nuxt/router.js                                                                                                                                                     friendly-errors 21:39:22

Module parse failed: Unexpected token (6:24)                                                                                                                                     friendly-errors 21:39:22
You may need an appropriate loader to handle this file type.
| 
| var _2ade856f = function _2ade856f() {
>   return interopDefault(import('../pages/auth.vue'
|   /* webpackChunkName: "pages/auth" */
|   ));

UPDATE

The error only comes with Nuxt.js 2.4.2 and NPM npm run dev. I have also tried yarn run dev and the above error is not there.

[imShara]

@PrimozRome same here

[PrimozRome]

@imShara i switched to yarn and it works ok. Maybe you can make switch too... It's an NPM bug.

[imShara]

@PrimozRome, yep, I temporary switched too, but no prefer yarn