"[CKEditorWebpackPlugin] Error: No translation has been found for the en language." while integrating ckeditor5 from source in react project with custom webpack config

[sgidd]

I am Integrating CKEditor 5 built from source in my react project which has custom webpack config (removed react-scripts and customized) so followed the webback configuration as suggested in https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/integrating-from-source.html , still giving below error while compilation:

Kindly help to resolve the issue asap as i am stuck with this from past 2-3 weeks.

Below is my webpack config :

const webpack = require('webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin');
const {styles} = require('@ckeditor/ckeditor5-dev-utils');
const path = require('path');

module.exports = (env = {}) => {
  const config = {
    entry: ['core-js/stable', 'regenerator-runtime/runtime', './src'],
    output: {
      path: path.resolve(__dirname, 'build'),
      filename: '[name].[contenthash].js',
      publicPath: '/',
    },
    resolve: {
      extensions: ['.tsx', '.ts', '.js', '.json'],
      mainFiles: ['index'],
      alias: {
        '^': path.resolve(__dirname, './'),
        '@': path.resolve(__dirname, './src'),
      },
    },
    module: {
      rules: [
        {
          test: /\.(js|ts|tsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          },
        },
        {
          test: /\.html$/,
          use: [
            {
              loader: 'html-loader',
              options: {minimize: true},
            },
          ],
        },
        {
          test: /\.m?js$/,
          resolve: {
            fullySpecified: false,
          },
        },
        {
          test: /\.(png|woff|woff2|eot|ttf)$/,
          loader: 'url-loader',
        },
        {
          test: /\.svg$/,
          use: ['raw-loader'],
        },
        {
          test: /\.css$/,
          use: [
            {
              loader: 'style-loader',
              options: {
                injectType: 'singletonStyleTag',
                attributes: {
                  'data-cke': true,
                },
              },
            },
            {
              loader: 'css-loader',
            },
            {
              loader: 'postcss-loader',
              options: {
                postcssOptions: styles.getPostCssConfig({
                  themeImporter: {
                    themePath: require.resolve(
                      '@ckeditor/ckeditor5-theme-lark'
                    ),
                  },
                  minify: true,
                }),
              },
            },
          ],
        },
      ],
    },
    plugins: [
      new HtmlWebPackPlugin({
        template: './src/index.html',
        filename: './index.html',
        favicon: './src/assets/favicon.png',
      }),
      new webpack.DefinePlugin({
        'process.env.BASE_URL': JSON.stringify(env.BASE_URL),
      }),
      new CKEditorWebpackPlugin({
        // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
        language: 'en',
        additionalLanguages: 'all',
        // buildAllTranslationsToSeparateFiles: true,
        addMainLanguageTranslationsToAllAssets: true,
        // translationsOutputFile: './src/ckeditor.js',
        // includeCorePackageTranslations: true,
        // verbose: true,
        // strict: false,
      }),
    ],
  };

  return config;
};

[dufipl]

Hello @sgidd, thank you for the report.

Unfortunately, I was not able to reproduce the issue while integrating CKEditor 5 built from the source. However, I was following a different guide than the one you've linked, which is dedicated to React integration: https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/frameworks/react.html#integrating-ckeditor-5-built-from-source.

What is important, I was testing our example webpack config from that guide, not the custom one you've sent because it's impossible for us to test your exact configuration. My advice for you is to take a look at the guide I've attached and compare what you have done looking for eventual mistakes or missed steps.

I hope that helps, but if you have any additional questions, please feel free to ask.

[sgidd]

Hi @dufipl , Thank You for the response.

I had already tried with the link you shared, but that guide itself says it assumes we are using the CLI set up but that is not the my case hence i followed the link shared by this guide itself as below:

Even if i tried with CLI setup and followed the guide you shared i am getting error as reported in issue https://github.com/ckeditor/ckeditor5-react/issues/317

Could you please assist me on this further.