Eleventy does not rebuild the modified js file

[SombreroElGringo]

Discussed in #1918

^{Originally posted by SombreroElGringo August 3, 2021}
Hello,

I have the following problem and have spent a lot of time trying to solve it without success. I have a folder that contains all the labels of my website in X languages. The problem is that when I make a change in that folder it is not updated in the browser, like you have when you change your layouts or content. What is strange is that when I update one file in that folder, I can see in the terminal that a change was made in the file, but when I check the dist/*.html file, I cannot see the new label in the dist/**.html it is not injected. I think it is a problem with browser-sync.

I tried playing with addWatchTarget and setBrowserSyncConfig({ files: [...] }) in .eleventy.js config file, but without success, the changes are still not injected.

Also, I found a working case. I update my translations file, then just save in .elevently.js to trigger the watch thingy. It will inject the new labels in the dist/**.html.

Here is my structure

i18n
-- index.js // custom script to pick the good label in the translations folder
src
-- _assets
-- _includes
-- content
-- translations
---- index.js
---- en
---- jp
.eleventy,js
... 

.eleventy,js

const i18n = require('./i18n');
const translations = require('./src/translations');

module.exports = (config) => {

  // Custom i18n filter
  config.addFilter('i18n', (key, page, data) => {
    const pluginOptions = {
      translations,
      languages: LANGUAGES,
      defaultLanguage: DEFAULT_LANGUAGE,
    };

    return i18n(key,
      data,
      pluginOptions,
      page,
    );
  });


  // Needed to prevent eleventy from ignoring changes to our
  // template files since they are in our `.gitignore`
  config.setUseGitIgnore(false);

  config.addPassthroughCopy({
    'src/misc/favicon.png': 'favicon.png',
    'src/misc/robots.txt': 'robots.txt',
  });

  return {
    dir: {
      input: 'src',
      output: 'dist',
      includes: '_includes/partials',
      layouts: '_includes/layouts'
    }
  };
};

src/translations/index.js

module.exports = {
  hello: 'Hello',
}

Here are the logs when I save a change in the src/translations/**/ *. js file. We can see Browsersync reloading before writing the change and then reloading after writing is complete. But the change is not injected into dist/**.html

[start:eleventy] File changed: src/translations/index.js
[start:eleventy] [Browsersync] Reloading Browsers...
[start:eleventy] Writing dist/index.html from ./src/content/home.liquid.
...
[start:eleventy] Copied 4 files / Wrote 68 files in 0.90 seconds (13.2ms each, v0.11.1)
[start:eleventy] Watching…
[start:eleventy] [Browsersync] Reloading Browsers...

And here are the logs when I save in .eleventy.js we can see some diff.

[start:eleventy] File changed: .eleventy.js
[start:eleventy] Writing dist/index.html from ./src/content/home.liquid.
...
[start:eleventy] Copied 4 files / Wrote 68 files in 0.75 seconds (11.0ms each, v0.11.1)
[start:eleventy] [Browsersync] Reloading Browsers...

Has anyone encountered this or has a workaround?

[SombreroElGringo]

Here is an example with the issue. Just need to follow the ReadMe to reproduce it.

[mattrossman]

I am having the same issue. The docs say that --watch mode will spider the dependencies of .eleventy.js and rebuild when they change, but I do not see that behavior.

If I change the .eleventy.js file then it rebuilds, but if I change a file that I require-ed then it doesn't update the build files.

[tedw]

Looks like this will be resolved in v2 🎉
#1052 (comment)

[zachleat]

This is likely also related to #1312 which just shipped with #2479.

I’d love to coalesce over on #1312 if possible (unless it’s still broken after the next canary ships—then please let me know!)