Gulp Loop Renders locale tag Incorrectly in Nunjucks Template

Question

I've created a gulp task to generate four pages based on the same template, for different languages / locales. The locales are: en-US, en-CA, en-NZ and en-AU. Previously, it was just a simple task written four times - once for each locale, with manual changes written in.

en-AU is the base URL (with no prefix), and the others are website.com/en-us/ etc.

Here is the Gulp task:

let localeList = Object.keys(config.locales);
let localePaths = Object.values(config.locales);

gulp.task('contentful:blog-page', () => {
    return loadBlogArticles()
      .then((res) => {
        for ( locale in localeList ) {
            var path = `pages/${localePaths[locale].toLowerCase()}` 
            
            if (localeList[locale] === 'enAU') {
                path = 'pages'
            }

            gulp.src('pages/templates/blog.njk')
            .pipe(data(() => ({ items: res.items.map(toBlogArticle(res.includes.Entry, res.includes.Asset)), locale: config.locales[localeList[locale]] })))
            .pipe(nunjucksRender({ path: [config.paths.pages.templates] }))
            .pipe(gulp.dest(path))
        }
      }
      )
      .catch((err) => Promise.reject(new Error(`failed fetching blog articles from contentful: ${err.message ? err.message : JSON.stringify(err)}`)))
});

While it's generated all pages in their correct subdirectories, it's the locale: config.locales[localeList[locale]] that's giving me issues.

It sets all the locales to en-US on the blog page, but if I add console.log(config.locales[localeList[locale]]) to the loop, it prints them out separately as it should. This is very puzzling.

Any help would be appreciated!

Answer 1

It was a closure error - adding let localeKey = localeList[locale] and replacing other instances of localeList[locale] with localeKey seemed to solve the issue.

Solved thanks to Lesha's comment below