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.