HtmlWebpackPlugin with different JSON locales (data not populating)

[loudpose]

Hi,

For the past few months, I've been struggling with one problem related to language translation. Hopefully, someone could give me a hint or point a direction. It's been a mess really, and I'm slowly beginning to lose hope. What I'm trying to do is pretty simple: I want to render the same pug views as static HTML, and use JSON data for different locales.

Here's a simplified repo that I made to illustrate the problem. There's no JS or CSS, just pug views & json locales packed with webpack: https://github.com/loudpose/pug-demo-repo

In this example, I use the HtmlWebpackPlugin. The data I send is 100% correct, but the result is not. It always uses the same language across all the files. Let me clarify, the first HtmlWebpackPlugin instance has "en.json" in the data, the second HtmlWebpackPlugin instance has "ua.json" in the data, and the third one has "fr.json" in the data. Here's how the data is used in an actual view:

- var data = htmlWebpackPlugin.options.data;
section.home__gallery 
	span=data.gallery.title

However, in the end, all three HtmlWebpackPlugin instances have the same data (from "en.json"). When I console log the instance itself, or the data inside, it is all correct. It almost feels like the data is being cached and reused across different HtmlWebpackPlugin instances despite me declaring a different data for it. What am I doing wrong?

[webdiscus]

Hello @loudpose,

Thanks for a very interesting use case.
I have already done a similar use case.
I'll try to find a solution for your case on weekend. Just I'm very busy, sorry.

[webdiscus]

Hello @loudpose,

I have the solution.

Please update the @webdiscus/pug-loader to the version 2.10.6.

When the same template filename is used to generate many static HTML files with different user data, then to the template filename must be added a unique query param, e.g. index.pug?en, index.pug?fr, ...

locales.forEach((locale) => {
	const { code, file } = locale;
	const data = getLocalesData(locale);
	console.log(code, ':', data);

	const htmlPlugin = new HtmlWebpackPlugin({
		template: path.resolve(__dirname, 'views', 'pages', 'home', 'index.pug') + `?lang=${code}`, // <=
		filename: `${code}/index.html`,
		data: data,
		cache: false,
	});
	allHtmlPlugins.push(htmlPlugin);
});

[loudpose]

Hello @webdiscus,

This is a perfect solution, thank you! 😊