"No translation has been found for the en language." after upgrade from 18 to 19

poorgeek commented 4 years ago

Was just upgrading ckeditor5 from 18.0.0 to 19.0.0 and received the following message in the console:

40% building 22/23 modules 1 active ...ue-loader/lib/index.js??vue-loader-options!/projects/src/App.vue?vue&type=script&lang=js&[CKEditorWebpackPlugin] Error: No JS asset has been found during the compilation. You should add translation assets directly to the application from the `translations` directory. If that was intentional use the `buildAllTranslationsToSeparateFiles` option to get rif of the error.
[CKEditorWebpackPlugin] Error: No translation has been found for the en language.
92% chunk asset optimization CKEditor5Plugin[CKEditorWebpackPlugin] Error: Too many JS assets has been found during the compilation. You should add translation assets directly to the application from the `translations` directory or use the `addMainLanguageTranslationsToAllAssets` option to add translations for the main language to all assets or use the `buildAllTranslationsToSeparateFiles` if you want to add translation files on your own.

Even though its reported as an Error in the terminal console, my app does still compile and using CKEditor in the browser still works as expected with no errors or warnings in the browser console.

The fact that the first error is that I have "no JS assets" and the 2nd error is "too many JS assets" has me confused on what needs to be done to fix this.

My configuration follows the Using CKEditor from Source instructions for the Vue.js component.

// package.json
"@ckeditor/ckeditor5-basic-styles": "^19.0.0",
"@ckeditor/ckeditor5-block-quote": "^19.0.0",
"@ckeditor/ckeditor5-build-classic": "^19.0.0",
"@ckeditor/ckeditor5-dev-utils": "^13.0.1",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^9.0.1",
"@ckeditor/ckeditor5-editor-classic": "^19.0.0",
"@ckeditor/ckeditor5-essentials": "^19.0.0",
"@ckeditor/ckeditor5-heading": "^19.0.0",
"@ckeditor/ckeditor5-list": "^19.0.0",
"@ckeditor/ckeditor5-markdown-gfm": "^19.0.0",
"@ckeditor/ckeditor5-paragraph": "^19.0.0",
"@ckeditor/ckeditor5-remove-format": "^19.0.0",
"@ckeditor/ckeditor5-theme-lark": "^19.0.0",
"@ckeditor/ckeditor5-vue": "^1.0.1",

// vue.config.js
    configureWebpack: {
        plugins: [
            // CKEditor needs its own plugin to be built using webpack.
            new CKEditorWebpackPlugin({
                // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
                language: "en",
            }),
        ],
    },

ma2ciek commented 4 years ago

Hi!

Hm, it's interesting. These errors come from the latest ckeditor5-dev-webpack-plugin package which is responsible for creating and attaching translation assets. It looks like there're multiple webpack compilations done by Vue compiler and the translation service is lost here.

This error was hidden before, but the logic is quite the same.

Even though its reported as an Error in the terminal console, my app does still compile and using CKEditor in the browser still works as expected with no errors or warnings in the browser console.

If you target the english translation you can omit attaching the webpack plugin to serve lighter builds. It doesn't make sense to transpile english to english. Also that's why you don't have any problem here :smile:

Does the error shows up during the build script?

ma2ciek commented 4 years ago

Also, just add buildAllTranslationsToSeparateFiles to the webpack config as it's described in the warning and all translation files will be outputted to separate files and you should have no errors anymore.

poorgeek commented 4 years ago

These errors come from the latest ckeditor5-dev-webpack-plugin package

I figured that out AFTER I posted here ☹️. Let me know if you want me to take this issue report over to that repos; if it can't be moved by an Admin.

Does the error shows up during the build script?

Yes. Both errors show up the same as during serve and the build process completes with the following:

 WARNING  Compiled with 8 warnings                                                                                                                                           9:24:13 AM

 warning  

Conflict: Multiple assets emit different content to the same filename translations/en.js

With the "Conflict:" repeated 6 times.

just add buildAllTranslationsToSeparateFiles to the webpack config

I've done this, and the Error during serve has been reduced to:

[CKEditorWebpackPlugin] Error: No translation has been found for the en language.

And on build, the same single Error notice as above and the same 6 warning "Conflict" messages from before.

ghost commented 4 years ago

I'm facing the same issue with Webpack Encore and ckeditor5-react. In my case, I want French as the default bundled language.

Everything worked fine until a recent update (yesterday). I tried everything with config, but default language is still English and french translation is output in translation folder (while have no config to do so).

Here is my webpack config, but nothing special here :

.addPlugin(new CKEditorWebpackPlugin({
    language: 'fr'
}))

I manage to isolate the problem to the latest ckeditor5-dev-webpack-plugin, as @ma2ciek said. And by downgrading it to ^8.0.0, the problem disappears and the translation is bundled statically inside the build.

Any idea?

EDIT: downgrading "almost" works. Some translation are missing for some new features like select row in Table plugin.

ma2ciek commented 4 years ago

Hi @mfu-aroche,

Are you sure you updated all CKEditor 5 packages to the latest ones?

I guess that you should set the addMainLanguageTranslationsToAllAssets option to true to add translations for the main language for all assets. Or add the generated French translations in the <script> tag to your HTML file.

sunjae-kim commented 4 years ago

I'm facing the same issue.

Here was my next.config.js :

config.plugins.push(
  new CKEditorWebpackPlugin({
    language: 'ko',
  }),
);

I got error like :

[CKEditorWebpackPlugin] Error: No JS asset has been found during the compilation. You should add translation assets directly to the application from the `translations` directory. If that was intentional use the `buildAllTranslationsToSeparateFiles` option to get rif of the error.
[CKEditorWebpackPlugin] Error: No translation has been found for the ko language.
[CKEditorWebpackPlugin] Error: Too many JS assets has been found during the compilation. You should add translation assets directly to the application from the `translations` directory or use the `addMainLanguageTranslationsToAllAssets` option to add translations for the main language to all assets or use the `buildAllTranslationsToSeparateFiles` if you want to add translation files on your own.
[CKEditorWebpackPlugin] Error: No translation has been found for the ko language.
[CKEditorWebpackPlugin] Error: Too many JS assets has been found during the compilation. You should add translation assets directly to the application from the `translations` directory or use the `addMainLanguageTranslationsToAllAssets` option to add translations for the main language to all assets or use the `buildAllTranslationsToSeparateFiles` if you want to add translation files on your own.

So I set addMainLanguageTranslationsToAllAssets and buildAllTranslationsToSeparateFiles like this :

config.plugins.push(
  new CKEditorWebpackPlugin({
    language: 'ko',
    addMainLanguageTranslationsToAllAssets: true,
    buildAllTranslationsToSeparateFiles: true,
  }),
);

Then I get the same error and I don't know how to fix it..

[CKEditorWebpackPlugin] Error: No translation has been found for the ko language.
[CKEditorWebpackPlugin] Error: No translation has been found for the ko language.

package.json

"dependencies": {
    "@ckeditor/ckeditor5-alignment": "^19.0.0",
    "@ckeditor/ckeditor5-basic-styles": "^19.0.0",
    "@ckeditor/ckeditor5-block-quote": "^19.0.0",
    "@ckeditor/ckeditor5-editor-classic": "^19.0.0",
    "@ckeditor/ckeditor5-essentials": "^19.0.0",
    "@ckeditor/ckeditor5-font": "^19.0.0",
    "@ckeditor/ckeditor5-heading": "^19.0.0",
    "@ckeditor/ckeditor5-highlight": "^19.0.0",
    "@ckeditor/ckeditor5-image": "^19.0.0",
    "@ckeditor/ckeditor5-indent": "^19.0.0",
    "@ckeditor/ckeditor5-link": "^19.0.0",
    "@ckeditor/ckeditor5-list": "^19.0.0",
    "@ckeditor/ckeditor5-media-embed": "^19.0.0",
    "@ckeditor/ckeditor5-paragraph": "^19.0.0",
    "@ckeditor/ckeditor5-paste-from-office": "^19.0.0",
    "@ckeditor/ckeditor5-react": "^2.1.0",
    "@ckeditor/ckeditor5-table": "^19.0.0",
    "@ckeditor/ckeditor5-theme-lark": "^19.0.0",
    "@ckeditor/ckeditor5-typing": "^19.0.0",
    "@ckeditor/ckeditor5-upload": "^19.0.0"
},
"devDependencies": {
    "@ckeditor/ckeditor5-dev-utils": "^13.0.1",
    "@ckeditor/ckeditor5-dev-webpack-plugin": "^9.0.1",
}

ma2ciek commented 4 years ago

Hi! The addMainLanguageTranslationsToAllAssets option and the buildAllTranslationsToSeparateFiles option conflict as the their names suggest :) Could you try running only with one of them depending on your purpose? And the second question is whether these errors/warnings affects your build?

The output should be one per webpack build so I assume that the vue compiler runs some webpack parts several times :/

These errors were hidden in the past and the logic didn't change much so I don't expect large issues beside the fact that the error is visible. But that's for sure an issue.

sunjae-kim commented 4 years ago

The output should be one per webpack build so I assume that the vue compiler runs some webpack parts several times :/

I'm using Next.js to apply SSR, and that is why the configuration function runs twice. Once for the server, once for the client.

Could you try running only with one of them depending on your purpose?

I have added only buildAllTranslationsToSeparateFiles option. The errors are removed besides [CKEditorWebpackPlugin] Error: No translation has been found for the ko language.

And the second question is whether these errors/warnings affects your build?

It does not affect my build and the ckeditor works fine, but the ko.js file in the translations directory is empty. Is this okay to just ignore the message?

ghost commented 4 years ago

Thanks for your answer @ma2ciek. My packages are up to date as you can see (npm ls --depth=0 | grep @ckeditor):

@ckeditor/ckeditor5-alignment@19.0.0
@ckeditor/ckeditor5-autoformat@19.0.0
@ckeditor/ckeditor5-basic-styles@19.0.0
@ckeditor/ckeditor5-block-quote@19.0.0
@ckeditor/ckeditor5-core@19.0.0
@ckeditor/ckeditor5-dev-utils@13.0.1
@ckeditor/ckeditor5-dev-webpack-plugin@9.0.2
@ckeditor/ckeditor5-editor-classic@19.0.0
@ckeditor/ckeditor5-essentials@19.0.0
@ckeditor/ckeditor5-font@19.0.0
@ckeditor/ckeditor5-heading@19.0.0
@ckeditor/ckeditor5-horizontal-line@19.0.0
@ckeditor/ckeditor5-image@19.0.0
@ckeditor/ckeditor5-indent@19.0.0
@ckeditor/ckeditor5-link@19.0.0
@ckeditor/ckeditor5-list@19.0.0
@ckeditor/ckeditor5-media-embed@19.0.0
@ckeditor/ckeditor5-page-break@19.0.0
@ckeditor/ckeditor5-paragraph@19.0.0
@ckeditor/ckeditor5-paste-from-office@19.0.0
@ckeditor/ckeditor5-react@2.1.0
@ckeditor/ckeditor5-table@19.0.0
@ckeditor/ckeditor5-theme-lark@19.0.0
@ckeditor/ckeditor5-typing@19.0.0
@ckeditor/ckeditor5-upload@19.0.0
@ckeditor/ckeditor5-utils@19.0.0

I added addMainLanguageTranslationsToAllAssets to my Webpack Encore config like you said.

.addPlugin(new CKEditorWebpackPlugin({
    language: 'fr',
    addMainLanguageTranslationsToAllAssets: true
}))

After some testing, the editor is back in french by default with this setting. I'm not sure why it didn't work yesterday event though I had this setting set to true...

Why is this param required? With only one language, it should be automatically bundled along with the code.

But as you can see the translation is still emitted :/

And I still have this (non blocking) error on build time:

[CKEditorWebpackPlugin] Error: No JS asset has been found during the compilation. You should add translation assets directly to the application from the `translations` directory. If that wa
s intentional use the `buildAllTranslationsToSeparateFiles` option to get rif of the error.

(moreover there is a typo in this error message: to get rif of the error)

ma2ciek commented 4 years ago

Thanks @mfu-aroche and @sunjae-kim for the details!

I'll investigate these problems soon.

ghost commented 4 years ago

Thanks 😁

Artem29383 commented 4 years ago

Has anyone solved this problem? I get [CKEditorWebpackPlugin] Error: No translation has been found for the en language.

new CKEditorWebpackPlugin ({
       language: 'en',
       addMainLanguageTranslationsToAllAssets: true,
     }),

ghost commented 4 years ago

@Artem29383 unfortunately the problem is still present, even with the latest update

ma2ciek commented 4 years ago

Why is this param required? With only one language, it should be automatically bundled along with the code.

The problem is that when webpack creates multiple bundles we don't really know which bundle to which bundle the translation should be added. So we can either add to all bundles with the addMainLanguageTranslationsToAllAssets setting or emit a separate file, that can be added by the user to the HTML file directly to not duplicate. Maybe a better option would be to allow user to point the specific asset to which the translations should be added.

ghost commented 4 years ago

@ma2ciek something is clearly broken since version 9.0.0 of ckeditor5-dev-webpack-plugin as it was working almost flawlessly with previous versions.

According to the docs (https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html), when additionalLanguages was omitted the bundle was optimized for the main language only. Ok, but since 9.0.0 we also need addMainLanguageTranslationsToAllAssets in order to have the main language bundled up correctly. Besides the fact that the documentation is not up to date on this point (imao this is a shame for such a popular editor), the new option is adding useless complexity to the process. Why don't we stick to the old behavior with the translation being bundled up automagically when additionalLanguages is omitted? I think people who want only one language are expecting it to be a all-in-one build and not to have to load extra file. And people who want several language don't care about the main language being added directly to main build result, they will include one in any case.

Suppose the option and documentation are not a problem and one has configured everything correctly to use only one language. The translation is added correctly but a translation file is still emitted to build/translations folder. I'm sorry but I don't want a package to pollute my build directory with somewhat useless file I'll never use. And I'm not even talking about errors popping around during build stating that the plugin didn't find JS assets for the translation and Webpack warning about the fact that the unwanted translation file has been written multiple times with different content...

ma2ciek commented 4 years ago

Hey, I'll try to address the above issues.

@ma2ciek something is clearly broken since version 9.0.0 of ckeditor5-dev-webpack-plugin as it was working almost flawlessly with previous versions.

With the previous version some errors were hidden. I guess that there's a small bug with emitting file even if the addMainLanguageTranslationsToAllAssets is set to true.

According to the docs (https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html), when additionalLanguages was omitted the bundle was optimized for the main language only.

My apologies for not updated snippet. Usage is present https://github.com/ckeditor/ckeditor5-dev/tree/master/packages/ckeditor5-dev-webpack-plugin and on NPM site of this package.

Why don't we stick to the old behavior with the translation being bundled up automagically when additionalLanguages is omitted

Because it adds a lot of complexity to the process and working with plural forms and automagically replacing stirngs, objects etc in the code which can be minimized, obfuscated is a nightmare. Adding a snippet to the bundle seems to be much easier to do, but integrations show out that change isn't as good for the clients.

I think people who want only one language are expecting it to be a all-in-one build and not to have to load extra file

That's still the default setting for one selected language and one bundle target for a default webpack configuration.

Suppose the option and documentation are not a problem and one has configured everything correctly to use only one language. The translation is added correctly but a translation file is still emitted to build/translations folder. I'm sorry but I don't want a package to pollute my build directory with somewhat useless file I'll never use. And I'm not even talking about errors popping around during build stating that the plugin didn't find JS assets for the translation and Webpack warning about the fact that the unwanted translation file has been written multiple times with different content...

These are problems connected with multiple builds made in the same time by the vue compiler I wasn't aware of. These issues for sure need to be addressed.

airstarh commented 4 years ago

Colleagues. I use CKeditor 5 in the Vue.js environment. Since yesterday update (from 18.0.0 to 19.0.1) my project build fails. Google keeps silence. The only more ore less related thread I find is this one. I do not want to paste too much but below are several messages which I see in the console. Please, help me understand what is going on. [UPD]: I reverted on version 18.0.0 and all started work again. Please, keep also in mind: in Vue, if build fails, the folder dist disappears.

|  Building for production...[CKEditorWebpackPlugin] Error: No translation has been found for the en language.
[CKEditorWebpackPlugin] Error: No translation has been found for the ru language.
\  Building for production...[CKEditorWebpackPlugin] Warning: The plural form function for the 'en' language has not been set.
|  Building for production...

~

error  in ./node_modules/@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice.js

Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
this.query.translateSource is not a function

liuxiaojiu commented 4 years ago

Hi! The addMainLanguageTranslationsToAllAssets option and the buildAllTranslationsToSeparateFiles option conflict as the their names suggest :) Could you try running only with one of them depending on your purpose? And the second question is whether these errors/warnings affects your build?

The output should be one per webpack build so I assume that the vue compiler runs some webpack parts several times :/

These errors were hidden in the past and the logic didn't change much so I don't expect large issues beside the fact that the error is visible. But that's for sure an issue.

Thanks, @ma2ciek I use your answer. Now, working. But , i still have this (non blocking) error on build time:

[CKEditorWebpackPlugin] Error: No JS asset has been found during the compilation. 
You should add translation assets directly to the application from the `translations` directory.
 If that was intentional use the `buildAllTranslationsToSeparateFiles` option to get rif of the error.
[CKEditorWebpackPlugin] Error: No translation has been found for the zh-cn language.

My version "@ckeditor/ckeditor5-dev-webpack-plugin": "^20.0.0",

leo91000 commented 4 years ago

I have the same problem : after updating ckeditor to 20.0.0 I have the exact same error message. The build is still working but I have the translation error message

awmartin commented 4 years ago

I'm encountering this as well. Breaks upgrading to v19. 😞

airstarh commented 4 years ago

Colleagues, once again, JFYI: Vue deletes folder "dist" on problems with build. I cannot store translations there. What could be suggested? Thanks in advance.

thomas-negrault commented 4 years ago

I am not using ckeditor5-vue but I have the same issue with multiples:

Conflict: Multiple assets emit different content to the same filename translations/en.js
 warning
Conflict: Multiple assets emit different content to the same filename translations/en.js
 warning
Conflict: Multiple assets emit different content to the same filename translations/fr.js
 warning
Conflict: Multiple assets emit different content to the same filename translations/fr.js

(11 times each) I use this configuration:

    .addPlugin(
      new CKEditorWebpackPlugin({
        language: 'en',
        additionalLanguages: ['fr'],
        buildAllTranslationsToSeparateFiles: true,
        addMainLanguageTranslationsToAllAssets: true,
      })
    )

If I remove the 2 lasts lines, I have the following error:

[CKEditorWebpackPlugin] Error: No JS asset has been found during the compilation. You should add translation assets directly to the application from the `translations` directory. If that was intentional use the `buildAllTranslationsToSeparateFiles` option to get rif of the error.
[CKEditorWebpackPlugin] Error: Too many JS assets has been found during the compilation. You should add translation assets directly to the application from the `translations` directory or use the `addMainLanguageTranslationsToAllAssets` option to add translations for the main language to all assets or use the `buildAllTranslationsToSeparateFiles` if you want to add translation files on your own.

With buildAllTranslationsToSeparateFiles set to true, I have the "different content to the same filename" warning. addMainLanguageTranslationsToAllAssets does not seems to change anything.

"@ckeditor/ckeditor5-adapter-ckfinder": "^19.0.1",
"@ckeditor/ckeditor5-autoformat": "^19.0.1",
"@ckeditor/ckeditor5-autosave": "^19.0.1",
"@ckeditor/ckeditor5-basic-styles": "^19.0.1",
"@ckeditor/ckeditor5-block-quote": "^19.0.1",
"@ckeditor/ckeditor5-core": "^19.0.1",
"@ckeditor/ckeditor5-dev-utils": "^20.0.0",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^20.0.0",
"@ckeditor/ckeditor5-easy-image": "^19.0.1",
"@ckeditor/ckeditor5-editor-balloon": "^19.0.1",
"@ckeditor/ckeditor5-engine": "^19.0.1",
"@ckeditor/ckeditor5-enter": "^19.0.1",
"@ckeditor/ckeditor5-essentials": "^19.0.1",
"@ckeditor/ckeditor5-heading": "^19.0.1",
"@ckeditor/ckeditor5-link": "^19.0.1",
"@ckeditor/ckeditor5-list": "^19.0.1",
"@ckeditor/ckeditor5-media-embed": "^19.0.1",
"@ckeditor/ckeditor5-paragraph": "^19.0.1",
"@ckeditor/ckeditor5-react": "^2.1.0",
"@ckeditor/ckeditor5-table": "^19.0.1",
"@ckeditor/ckeditor5-theme-lark": "^19.0.1",
"@ckeditor/ckeditor5-ui": "^19.0.1",
"@ckeditor/ckeditor5-upload": "^19.0.1",
"@ckeditor/ckeditor5-utils": "^19.0.1",
"@ckeditor/ckeditor5-widget": "^19.0.1",

Edit : I use symfony/webpack-encore and upgrading from 0.22.4 to 0.28.3 change the number of warnings from 11 for each languages, to only one for each languages:

airstarh commented 4 years ago

Unexpectedly, by removing ALL options from "new CKEditorWebpackPlugin({..." my Vue project has passed build process. Guys, what is going wrong with your documentation? How exactly should we set it up for Vue? Are there any expectations? Promises? Thank you! [UPD] Actually, I should express my gratitude to you at first: your new CKE5 is almost ideal. I use it currently on my site here: https://saysimsim.ru/#/ CKE5 is now at version 20.0.0 and it passes builds and run-serve procedure with corrections I mention above. However now it just throws Warning, that language is required. It would be very cool if you point me to a place, where I could find more details of how to make it international without the bugs listed here. Colleagues, thank you very much at now and in advance! [UPD2] I've just thought, you could take a look at my Vue configuration by this address: https://github.com/airstarh/vuesandbox

ByteFinance commented 4 years ago

Same error..

krazychen commented 4 years ago

is anyone already resolve this issue in version 20.0.0?

BigFaceWangCY commented 4 years ago

Same error.. Anyone fix this bug ?

ma2ciek commented 4 years ago

Hey,

I'm sorry for the lack of updates.

I've analyzed the problem and I think that one of the best options to achieve the previous functionality is allowing to pick the bundle by its name to which the translations will be output - see ckeditor/ckeditor5#7688.

ma2ciek commented 4 years ago

This issue should be now fixed after installing ckeditor5-dev-webpack-plugin@23.1.0 and ckeditor5-dev-utils@23.1.0 The latest release allows for specifying the exact asset to which the translation should be appended. The translationsOutputFile option was added to the default Vue.js setup in the Vue.js integration guide that will be publicly available on the https://ckeditor.com/docs/ckeditor5 soon. The translationsOutputFile option is described shortly in https://github.com/ckeditor/ckeditor5-dev/tree/master/packages/ckeditor5-dev-webpack-plugin.

crypto-dump commented 4 years ago

Hi, @ma2ciek , I've updated those plugins to ckeditor5-dev-webpack-plugin@23.1.0 and ckeditor5-dev-utils@23.1.0. And also updated CKEditorWebpackPlugin settings.

new CKEditorWebpackPlugin( {
                language: 'en',
                translationsOutputFile: /app/
            } )

The local serve is working fine, but I'm getting issue when building it.

Here's the log.

Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 2)
this.query.translateSource is not a function

ma2ciek commented 4 years ago

@top-dev830,

Unfortunately, I can't reproduce it, but the issue seems to be valid.

I see that the error is coming from https://github.com/webpack-contrib/thread-loader that can work differently on various machines. I guess that this worker can be somehow turned off. For now, it's incompatible with the CKEditorWebpackPlugin.

Loaders running in a worker pool are limited. Examples:

Loaders cannot emit files.

Loaders cannot use custom loader API (i. e. by plugins).

Loaders cannot access the webpack options.

The third option is limiting the usage of CKEditorWebpackPlugin and it seems that this was not working in the past as well.

ThomasTr commented 4 years ago

@ma2ciek, for me it seems to work fine without issues on the newest version, thanks.

crypto-dump commented 4 years ago

@ma2ciek , Thanks for your reply. That's my fault. I removed the previous package-lock.json and built again. Now it's working seamlessly.

Thanks for your great work.

teammate-james commented 3 years ago

Regarding the [CKEditorWebpackPlugin] Error: No translation has been found for the en language. build error... Try downgrading postcss-loader to v3.0.0. That worked for us.

ms-dosx86 commented 3 years ago

I had the same issue, but I figured out how to fix this. I thought that all I needed to do was just install Angular related package of ckeditor and @ckeditor/ckeditor5-build-classic and use ClassicEditor from there. And to use specific locale I just need to add CkEditorWebpackPlugin into my webpack config and set desired language. It doesn't work like that. The final bundle with all locales and translations is in @ckeditor/ckeditor5-build-classic/build/ckeditor.js which is generated by default with only english locale. To fix that a new custom build needs to be created. I created one https://github.com/ms-dosx86/ckeditor5-build-custom . This is my project specific build, so you have to create your own. Feel free to fork tho. The main thing is the src/ckeditor.js file where you set your config (language as well), then sync language in the webpack config and finally npm run build which builds build/ckeditor.js which is the final bundle that will be used in runtime. Then publish it as an external npm package, install into your project and import editor from the custom build. That's it. At least I was able to fix it that way. Hope it helped.

Hazzamanic commented 3 years ago

I had to do a few things. In my vue.config.js I had to set parallel: false, because the thread-loader package was breaking my build.

I also output two bundles, one for the admin and one for client facing side. CKEditor is only in the admin bundle, and while that worked fine the other bundle would throw an error [CKEditorWebpackPlugin] Error: No translation has been found for the en language.. This didn't actually break the bundle but does mean it outputs an error code so my pipeline would fail. Not being particularly knowledgeable about webpack, I've kinda gone full nuclear and I only run the plugin on the admin build. I do this by setting an environment variable in my npm build script then optionally include the CKEditorWebpackPlugin if this is set to true.

    plugins: [
      // removed other plugins for brevity
      ...(process.env.USE_CKEDITOR === 'true' ? [new CKEditorWebpackPlugin({
        language: "en",
        translationsOutputFile: /app/,
      })] : []),

Maybe there is a better way but this seems to have fixed it for now.

cherepanov commented 3 years ago

Got this error because output file was named other than ckeditor.js, fixed by setting option

translationsOutputFile: 'main.js'

albertomanzano11 commented 2 years ago

The CKEditorWebpackPlugin has issues within the last updates. For me, my solution was to unistall it and add languages via CDN and pass it to configData { language : "es" } .

https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html

ssougnez commented 1 year ago

I've been trying to setup a ckeditor build inside an Angular application and I faced the issue. Turns out that I could fix it by deactivated the cache folder generated with webpack. Indeed, the first time, it worked, but when I rebuilt my application and it was using the cache, I had the error.

kiranpattar commented 1 year ago

new CKEditorTranslationsPlugin({ label, strict:false, language: 'en', additionalLanguages:'all', buildAllTranslationsToSeparateFiles:true, extensions: ['.js', '.jsx'], verbose: true, } ))

adding this is creating compilation errors

as below

TypeError: Cannot read property 'path' of undefined
servetranslations.js:46 serveTranslations [ux]/[@ckeditor]/ckeditor5-dev-translations/lib/servetranslations.js:46:61
ckeditortranslationsplugin.js:102 CKEditorTranslationsPlugin.apply [ux]/[@ckeditor]/ckeditor5-dev-translations/lib/ckeditortranslationsplugin.js:102:3
ResolverFactory.js:662 Object.exports.createResolver [ux]/[enhanced-resolve]/lib/ResolverFactory.js:662:11

kiranpattar commented 1 year ago

without language compiles without issues

ckeditor / ckeditor5-vue

"No translation has been found for the en language." after upgrade from 18 to 19 #134

package.json