[CKEditorWebpackPlugin] Warning: Found '_this.t()' when importing table plugin

[semiaddict]

📝 Provide detailed reproduction steps (if any)

1. Setup a custom CKEditor build with the table plugin using the new import syntax (see https://github.com/ckeditor/ckeditor5/releases/tag/v37.0.0-alpha.1)
2. Use the CKEditorWebpackPlugin to export translations
3. Notice a few warnings in the console when building (see below)

Note: this only happens when using the new imports:

import { Table } from "@ckeditor/ckeditor5-table";

It doesn't happen if replaced with:

import Table from '@ckeditor/ckeditor5-table/src/table';

✔️ Expected result

The build doesn't produce any warning.

❌ Actual result

The following warnings appear in the console:

[CKEditorWebpackPlugin] Warning: Found '_this.t()' in the [WORKDIR]/node_modules/@ckeditor/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.js. Only messages from direct 't()' calls will be handled by CKEditor 5 translation mechanisms.
[CKEditorWebpackPlugin] Warning: Found '_this.t()' in the [WORKDIR]/node_modules/@ckeditor/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.js. Only messages from direct 't()' calls will be handled by CKEditor 5 translation mechanisms.

❓ Possible solution

I believe this might be coming from the two statements here:

https://github.com/ckeditor/ckeditor5/blob/b60d751ec0fa7c56ac5c6df2b9e52ad87d1f3ceb/packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.ts#L298

https://github.com/ckeditor/ckeditor5/blob/b60d751ec0fa7c56ac5c6df2b9e52ad87d1f3ceb/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.ts#L276

According to the warning, this.t should be replaced by a direct call to t. So label: this.t!( should be replaced with label: t(

📃 Other details

• Browser: N/A
• OS: Debian
• First affected CKEditor version: just noticed this with the latest version (v40.2.0), but might have been here since v37.0.0-alpha.1
• Installed CKEditor plugins: many plugins, but the warnings only come from the Table plugin

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[Witoso]

This looks like an issue related to Typescript migration, and we haven't noticed any issues like that so far. Apart from updating the CKEditor editor packages, did you also update the dev packages?

[semiaddict]

Hi @Witoso,

Thank you for getting back to me.

It appears I had missed the switch from @ckeditor/ckeditor5-dev-webpack-plugin to @ckeditor/ckeditor5-dev-translations. I just replaced it, but I am unfortunately still getting the same warnings.

[semiaddict]

So now I am basically using ckeditor packages v40.2.0 and dev packages (ckeditor5-dev-translations and ckeditor5-dev-utils) v39.5.0.

Here are the options used with CKEditorTranslationsPlugin:

{
  "language": "fr",
  "additionalLanguages": ["en"],
  "buildAllTranslationsToSeparateFiles": true,
  "outputDirectory": "translations/ckeditor",
  "verbose": true
}

[Witoso]

Could you share more information about your build flow?

[semiaddict]

Hello @Witoso,

I'm using CKEditor as part of a very large SPA built with vue (I'm still using Webpack as I haven't yet migrated to Vite due to CKEditor translations). My CKEditor setup is, however, fairly basic and follows the "Building the editor from source" guide.

It seems to me that the cause of the warning is fairly obvious, especially that those two lines seem to be the only ones in the entire CKEditor codebase that use t indirectly (using this.t); in all other places the t function is assigned into a t variable to be used directly such as here: https://github.com/ckeditor/ckeditor5/blob/7d600e2c87ec9b1982359343da9188ed7eebd69f/packages/ckeditor5-heading/src/utils.ts#L23

But if need be, I should be able to create a simplified repro.

Thanks again for your help.

[Witoso]

It would be great to get some minimal reproducible repo for this issue.

[semiaddict]

@Witoso, here's a reproducible repo: https://github.com/semiaddict/ckeditor5-issue-15603-repro

It seems that the warnings only appear when webpack is configured to transpile CKEditor dependencies (see vue.config.js) as noted in the Vue.js 3+ rich text editor component guide.