- Issue created by @GaëlG
- Merge request !23Issue #3435837 by mably, gaëlg, dpiet: Fix translation by making sure tarteaucitron.en.js is loaded before another language → (Merged) created by GaëlG
- Issue was unassigned.
- Status changed to Needs review
9 months ago 9:37am 25 March 2024 - 🇫🇷France mably
We have TacJS deployed on about 20 web sites in french language and we never had such a problem.
The problem is probably specific to your site and configuration.
- 🇫🇷France GaëlG Lille, France
We use it on many websites too, and never had the problem before. But now we use as a patch this commit from 🐛 Tarteaucitron translation files can be loaded before the main tarteaucitron js Fixed (which is merged in dev but is not included in latest sable 6.4.0): https://git.drupalcode.org/project/tacjs/-/commit/a8e29ca21daff3a26cbe8f...
I guess it made the bug appear.
- Status changed to Postponed: needs info
9 months ago 7:38am 26 March 2024 - 🇫🇷France GaëlG Lille, France
OK, then I'll investigate further. Thank you for your quick answers!
- Assigned to GaëlG
- Status changed to Needs work
9 months ago 9:16am 5 April 2024 - 🇫🇷France GaëlG Lille, France
I tried to reproduce with https://simplytest.me/ (tacjs 6.5 on core 10.2.5):
- enabled Interface Translation
- added French language
- saved TacJS settings with "Default state: Wait"
- checked "Need consent" for FERank service
- cleared the cache
- went to french home (/fr) in a new private navigation
Result: correct translation- disabled JS aggregation
- cleared the cache again
Result: still correct translationtarteaucitron.fr.js
is always loaded aftertarteaucitron.en.js
, which is right.Still, on my project, I get the reverse order so that translation doesn't work. I found out that this happens when I attach a custom lib in a template (with Twig function
attach_library()
) which declares its dependency ontacjs/tacjs
(because it adds an entry totarteaucitron.services
). As soon as I remove the dependency, it works again.So: is it a bug in my custom code or a bug in the module?
If I check the code, I can see that:
*tacjs/tarteaucitron.en.js
is a dependency fortacjs/tacjs
which is attached intacjs_page_attachments()
.
*tacjs/tarteaucitron.fr.js
(declared intacjs_library_info_build()
) is also attached intacjs_page_attachments()
, afterwards. It depends ontacjs/tarteaucitron.js
but not ontacjs/tarteaucitron.en.js
.
And none of the two libraries have a weight. Thus, with no weight nor dependency, loading order is not guaranteed. It happens that on simplytest.me the order is OK. But it's not on my project.To me, tacjs module should make sure
tacjs/tarteaucitron.fr.js
is always loaded aftertacjs/tarteaucitron.en.js
Anyway, I set to "needs work" for now (assigned to me), because it looks like my merge request causes another bug. I have to check that.
- 🇫🇷France mably
So a possible solution could be to add a dependency on tarteaucitron.en.js for all tarteaucitron.xx.js translation files.
It could be done in the
tacjs.module
file like this:function tacjs_library_info_build() { $libraries = []; /** @var \Drupal\Core\File\FileSystemInterface $fileSystem */ $fileSystem = \Drupal::service('file_system'); foreach ($fileSystem->scanDirectory(\Drupal::service('extension.list.module')->getPath('tacjs') . '/assets/vendor/tarteaucitron.js/lang/', '/tarteaucitron\.(\w+)\.js/') as $file) { if ($file->filename === "tarteaucitron.en.js") { continue; } $libraries[$file->filename] = [ 'js' => [ '/' . $file->uri => [], ], 'dependencies' => [ 'tacjs/tarteaucitron.en.js', ], ]; } return $libraries; }
In the above code, we just changed the dependency from this:
'dependencies' => [ 'tacjs/tarteaucitron.js', ],
to this:
'dependencies' => [ 'tacjs/tarteaucitron.en.js', ],
Could you test it and see if it fixes your problem?
- 🇫🇷France GaëlG Lille, France
Yes, exactly, that's one way to fix that I have in mind. I first used the weight system instead because technically, from an point of view agnostic from context, it's not required that .en.js is loaded for .fr.js to work. It's just that if .en.js is loaded, it has to be loaded before .fr.js.
I mean:
#1 .fr.js
#2 .en.js
KO#1 .en.js
#2 .fr.js
OK#1 .en.js
OK#1 .fr.js
OKIf the two ways (dependency or weight) actually work (I'll check that), I'll ask you which one you prefer.
- 🇫🇷France mably
I guess loading the english language file first ensures that all strings will get displayed even those not yet translated.
- 🇫🇷France GaëlG Lille, France
I don't think so, as .en.js just defines the
tarteaucitron.lang
variable and .fr.js just redefines it. - Issue was unassigned.
- Status changed to Needs review
8 months ago 8:40am 9 April 2024 - 🇫🇷France GaëlG Lille, France
Actually weight is discouraged ( https://www.drupal.org/docs/develop/theming-drupal/adding-assets-css-js-... → ) and I now think the right fix is to load only one language file (no need for .en.js if .fr.js is loaded).
So I updated my merge request. It seems to work well. - 🇫🇷France dpiet
I reproduce the problem when I add the module to a custom installation profile with a french installation.
After a french installation with my custom profile (included
tacjs
module), twotarteaucitron.LANG.js
were loaded:tarteaucitron.en.js
is loaded aftertarteaucitron.fr.js
that is why texts are in english.I tried to delete
tarteaucitron.en.js
intacjs.libraries.yml
and after a french installation with my custom profile, just onetarteaucitron.LANG.js
is loaded:tarteaucitron.fr.js
. - 🇩🇪Germany mhdev90 Apolda
For me, this error occurs when a module has a dependency defined directly to "tacjs/tacjs". As soon as I have changed the dependency to "tacjs/tarteaucitron.js", the problem seems to be solved.
Automatically closed - issue fixed for 2 weeks with no activity.