Ckeditor5 builder Translations Issue

[daniel-agouveia]

Hello everyone, I used the online builder, and when following the installation for angular I keep getting the same error when trying to access translations Failed to resolve import "ckeditor5/dist/translations/pt.js", even if I use what the builder tells me to 'ckeditor5/translations/pt.js' it still does not work since it can't find the directory for 'ckeditor5/translations/pt.js'.

Any idea on how to solve this?

I'm using Angular 18 and Vite.

[Witoso]

Hmm,

• Works for vanilla + npm (Vite): https://stackblitz.com/edit/azm9nu?file=main.js,index.html
• Works in the sample download from builder (default Angular 18).

We would need additional information, and more detailed reproduction steps.

[daniel-agouveia]

Retro Steps:

1. Open the build on web and picked classic editor(basic) and picked some of the features (I did not pick the language dropdown)
2. Tool bar is main and I disabled wrapped.
3. In the installation tab copy and pasted in my vscode terminal the following commands: npm install ckeditor5 npm install @ckeditor/ckeditor5-angular
4. I switch the language to Portuguese on the left side
5. I created an empty component in my project
6. I copied the CSS, HTML and ts from the build to my component.
7. An error was given when I try to import translations from 'ckeditor5/translations/pt.js';

The package versions are: "ckeditor5": "^42.0.2", "@ckeditor/ckeditor5-angular": "^8.0.0"

[Witoso]

Please also specify the Angular setup, as it's not reproducible in the bare Angular 18 installation.

[daniel-agouveia]

The project was already created, I updated to v18 and added ckeditor5. i tried making a new project by running ng new and I still get the same error.

Quick edit: @Witoso I followed this issue #16535 and it worked for me, I added that to the exports of the package.json of ckeditor5 and it worked I got translations to work, will this be corrected in some versions? Because my project is worked on by other people and we would have to do this change in order to have translations working.

[daniel-agouveia]

@Witoso did you check my previous comment?

[Witoso]

We changed already the config of exports a bit in v42.0.2. As I said, the downloaded sample project still works correctly (from Builder, based on Angular 18). 

I updated to v18 and added ckeditor5

Please provide additional information about the project. We need information about the node version, ideally tsconfig, as we cannot reproduce the issue on the bare download from the Builder.

[daniel-agouveia]

I will uninstall my current version of ckeditor and see if there is a difference

[daniel-agouveia]

I uninstalled my ckeditor5 42.0.2 I had installed previously on Friday and installed it again and still the error shows up for import translations from 'ckeditor5/translations/pt.js';

my ts config file

{ "compileOnSave": false, "compilerOptions": { "baseUrl": ".", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "experimentalDecorators": true, "allowSyntheticDefaultImports": true, "moduleResolution": "node", "importHelpers": true, "target": "ES2022", "module": "es2022", "allowJs": true, "lib": [ "ES2022", "dom" ], "useDefineForClassFields": false }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": true, "strictInputAccessModifiers": true, "strictTemplates": true } }

I'm using node version 18.19.0

[Witoso]

Sorry, I just realized downloading Angular from Builder is not on production :facepalm: , it will be in a couple of days.

This is my example: https://github.com/Witoso/angular-example that works after npm install and npm start.

Do you see any major differences. Thanks for helping.

[daniel-agouveia]

Looking at your example project the only change I did was change the "moduleResolution": "node" to "moduleResolution": "bundler", this fixed the issue, but one thing I noticed is that my global cli is still using angular 17, I will update my global CLI to angular 18 and see if the moduleResolution changes if it doesn't than changing the moduleResolution fixes this issue with the import.

Thank you @Witoso for your help!

[pszczesniak]

Dear @daniel-agouveia

Please imports translations without directly writing dist/ in import path.

This is caused by our latesr change in CKEditor5 42.0.2.

In package.json in exports we map everything that is imported with slash at the end of ckeditor/ to be taken from /dist folder:

"./*": "./dist/*",

So in short words:

import translations from 'ckeditor5/dist/translations/pt.js';

really do not exists (or to be more precise, it's not allowed by exports)

Please try to import translations using path as below:

import translations from 'ckeditor5/translations/pt.js';

and let us know if it solve your problem.

[daniel-agouveia]

Dear @daniel-agouveia

Please imports translations without directly writing dist/ in import path.

This is caused by our latesr change in CKEditor5 42.0.2.

In package.json in exports we map everything that is imported with slash at the end of ckeditor/ to be taken from /dist folder:

"./*": "./dist/*",

So in short words:

import translations from 'ckeditor5/dist/translations/pt.js';

really do not exists (or to be more precise, it's not allowed by exports)

Please try to import translations using path as below:

import translations from 'ckeditor5/translations/pt.js';

and let us know if it solve your problem.

I'm now importing using import translations from 'ckeditor5/translations/pt.js'; but for this to work I had to change my "moduleResolution": "node" to bundler and it's working properly.

Thank you @Witoso for the patience and help solving this. @pszczesniak I would suggest adding to the online builder the following information, angular versions before 18 still use moduleResolution: "node" and it should be changed to bundler for the import of translations to work properly. Should help other people solve this issue if they ever encounter this using version 17 for example.

[Witoso]

Theoretically changing to  "moduleResolution": "node16" or "moduleResolution": "nodenext" should help as well.

[Witoso]

Discussion moved to https://github.com/ckeditor/ckeditor5/issues/16816