Static GitHub Issues

[801] nuxt generate with dynamic import uses incorrect file

prev: Nuxt generate hangs after completion
next: when I use typescript in layout file, error raise on page reload.

I am using webpack's import() to import local files based on a route parameter. When running the app with either npm run dev or npm run build; npm start, the correct file is loaded both server and client side.

However, when using npm run generate to generate static html for each possible version of the route, the same data is imported into each file.

nuxt.config.js:

const blogRoutes = require('./static/blog/posts.json').map(slug => `/blog/posts/${slug}`);

module.exports = {
  generate: {
    routes: blogRoutes
  }
}

Page:

export default {
  async asyncData({ params: { slug }) {
    const data = await import(`~static/blog/posts/${slug}.md`);
    return {
       post: parse(data)
    }
  }
}

Expected result: each route receives the contents of its respective markdown file.

Actual result: each route receives the contents of the same file.

I have tried logging the contents of data in asyncData when running generate, and the correct file contents are logged. However, the final HTML that is written to the dist folder is the same for each version of the route, i.e. for all slugs, the same output appears in the HTML.

It seems to use the contents of the file for the last route - if there are two routes passed to generate in nuxt.config.js, /blog/posts/1 and /blog/posts/2, both rendered HTML files for the associated route will use the data from ~static/blog/posts/2.md.

window.__NUXT__.data contains the correct data, but the rendered HTML does not use that data.

Using require instead of import() results in the same issue.

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This feature request is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c692">#c692</a>)</em></sub></div>