Nuxt.js: Empty page with invalid html rendered when using nested routes on index

[pju-]

Version

v2.4.3

Reproduction link

https://github.com/pju-/nuxt-generate-bugreport

Steps to reproduce

When using the very basic repo I've provided:
After install, run npm run generate

What the repo does:

• fresh nuxt install
• pages setup for nested routes:

/index
  |-- _id.vue
  |-- index.vue
index.vue

Then run npm run generate

What is expected ?

The index route (/) should be rendered normally.
The resulting html should be a static representation of the page.

Expected console output:
✔ Generated /page
✔ Generated /

What is actually happening?

The / route is rendered, but also a route with an empty name is rendered.

Console output:
✔ Generated /page
✔ Generated /
✔ Generated

Depending on if / or the empty route is rendered last, the resulting html is a mess:
If / is rendered last, everything is fine.
If the empty route is rendered last, the html is a mess (content not injected, script tag wrong).

For /page, everything works as expected.

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

[loilo]

I'm experiencing a very similar issue (probably from the same cause) and have taken some hours to investigate.

I've written down what I have found out so far in the readme of this minimal reproduction repository: Loilo/repro-nuxt-generate-slicing.

[pju-]

@Loilo That seems to be the same issue indeed. If you check the log output from generate, it is creating a route with empty name.
The reason why you are sometimes getting the right output is probably because the generation is async, so the correct route is produced after the empty one. In that case, the resulting index.html is overwritten and everything looks as it should.

[loilo]

Oh. So it's race conditions all the way down.

[stale[bot]]

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.

[davidbillamboz]

I am experimenting the same issue! It took me two days to find the issue... I was beginning to think I was crazy :D
When I read it might be a race condition issue, I found a quick fix by setting the generate concurrency setting to 1 and now the generated index.html is ok.

module.exports = {
  mode: 'universal',
  generate: {
    concurrency: 1,
  },
};

I think it's a major bug!

[davidbillamboz]

Actually, it was not fixed with the concurrency hack, I think I fixed the bug by removing the dummy route in the 'generate:extendRoutes' hook:

  hooks: {
    generate: {
      // Fix for race condition bug with the generated route '/' and ''
      // @see: https://github.com/nuxt/nuxt.js/issues/4982
      extendRoutes(generatedRoutes) {
        const index = generatedRoutes.findIndex(({ route }) => route === '');
        generatedRoutes.splice(index, 1);
      },
    },
  },

[loilo]

Nice workaround, @davidbillamboz. Can confirm that this works for my repro as well. 👍

[stale[bot]]

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.

[loilo]

Still reproducible with the reproduction repository.

[roshecode]

I still have this issue in [email protected]. Setting the generate.exclude option to [''] fixed the issue.