editor not showing/rendering on production mode

[fabioportieri]

Hello i recently upgraded my ckeditor editor to the latest version in my angular 14 (jhipster) application
it worked fine in development, while in production mode nothing is rendered, i have no error on console, and no error during build:

this is the markup generated:

can you help me out debugging the issue?

i used the online builder and copy pasted the code, that i readapted for my use case / component

those are the dependencies:

   "@ckeditor/ckeditor5-angular": "^8.0.0",
    "@ckeditor/ckeditor5-build-classic": "^43.3.1",
    "@ckeditor/ckeditor5-build-decoupled-document": "^44.0.0",
   "ckeditor5": "^43.3.0",

this is my webpack config, i even tried to build it as es5, but nothing changed

const webpack = require('webpack');
const { merge } = require('webpack-merge');
const path = require('path');
const { hashElement } = require('folder-hash');
const MergeJsonWebpackPlugin = require('merge-jsons-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const WebpackNotifierPlugin = require('webpack-notifier');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');

const environment = require('./environment');
const proxyConfig = require('./proxy.conf');

module.exports = async (config, options, targetOptions) => {
  const languagesHash = await hashElement(path.resolve(__dirname, '../src/main/webapp/i18n'), {
    algo: 'md5',
    encoding: 'hex',
    files: { include: ['*.json'] },
  });

 // Add CKEditor 5 Babel loader rule, trying to make it work..
 if (!config.module) {
  config.module = { rules: [] };
}
config.module.rules.push(
  {
    // Match files from the `ckeditor5` package but also `ckeditor5-*` packages.
    test: /(ckeditor5(?:-[^\/\\]+)?)[\/\\].+\.js$/,
    use: [
      {
        loader: 'babel-loader',
        options: {
          presets: [require('@babel/preset-env')]
        }
      }
    ]
  }
);


  // PLUGINS
  if (config.mode === 'development') {
    config.plugins.push(
      new ESLintPlugin({
        baseConfig: {
          parserOptions: {
            project: ['../tsconfig.app.json'],
          },
        },
      }),
      new WebpackNotifierPlugin({
        title: 'Nut Fe',
        contentImage: path.join(__dirname, 'logo-jhipster.png'),
      })
    );
  }

  // configuring proxy for back end service
  const tls = Boolean(config.devServer && config.devServer.https);
  if (config.devServer) {
    config.devServer.proxy = proxyConfig({ tls });
  }

  if (targetOptions.target === 'serve' || config.watch) {
    config.plugins.push(
      new BrowserSyncPlugin(
        {
          host: 'localhost',
          port: 9000,
          https: tls,
          proxy: {
            target: `http${tls ? 's' : ''}://localhost:${targetOptions.target === 'serve' ? '4200' : '13800'}`,
            ws: true,
            proxyOptions: {
              changeOrigin: false, //pass the Host header to the backend unchanged  https://github.com/Browsersync/browser-sync/issues/430
            },
          },
          socket: {
            clients: {
              heartbeatTimeout: 60000,
            },
          },
          /*
          ghostMode: { // uncomment this part to disable BrowserSync ghostMode; https://github.com/jhipster/generator-jhipster/issues/11116
            clicks: false,
            location: false,
            forms: false,
            scroll: false,
          },
          */
        },
        {
          reload: targetOptions.target === 'build', // enabled for build --watch
        }
      )
    );
  }

  if (config.mode === 'production') {
    config.plugins.push(
      new BundleAnalyzerPlugin({
        analyzerMode: 'static',
        openAnalyzer: false,
        // Webpack statistics in target folder
        reportFilename: '../stats.html',
      })
    );
  }

  const patterns = [
    {
      // https://github.com/swagger-api/swagger-ui/blob/v4.6.1/swagger-ui-dist-package/README.md
      context: require('swagger-ui-dist').getAbsoluteFSPath(),
      from: '*.{js,css,html,png}',
      to: 'swagger-ui/',
      globOptions: { ignore: ['**/index.html'] },
    },
    {
      from: require.resolve('axios/dist/axios.min.js'),
      to: 'swagger-ui/',
    },
    { from: './src/main/webapp/swagger-ui/', to: 'swagger-ui/' },
    {
      from: path.resolve(__dirname, '../node_modules/@angular-libs/ngx-dmi-uikit/assets/'),
      to: 'assets/'
    },
    // jhipster-needle-add-assets-to-webpack - JHipster will add/remove third-party resources in this array
  ];

  if (patterns.length > 0) {
    config.plugins.push(new CopyWebpackPlugin({ patterns }));
  }

  config.plugins.push(
    new webpack.DefinePlugin({
      I18N_HASH: JSON.stringify(languagesHash.hash),
      // APP_VERSION is passed as an environment variable from the Gradle / Maven build tasks.
      __VERSION__: JSON.stringify(environment.__VERSION__),
      __DEBUG_INFO_ENABLED__: environment.__DEBUG_INFO_ENABLED__ || config.mode === 'development',
      // The root URL for API calls, ending with a '/' - for example: `"https://www.jhipster.tech:8081/myservice/"`.
      // If this URL is left empty (""), then it will be relative to the current context.
      // If you use an API server, in `prod` mode, you will need to enable CORS
      // (see the `jhipster.cors` common JHipster property in the `application-*.yml` configurations)
      __IS_PRODUCTION__: environment.__ISPRODUCTION__ || config.mode === 'production',
      SERVER_API_URL: JSON.stringify(environment.SERVER_API_URL),
      __APP_CLIENT__: JSON.stringify(environment.__APP_CLIENT__),
      __NO_AUTH__: environment.__NO_AUTH__,
      __CHATGPT_IFRAME_HASH__: JSON.stringify(environment.__CHATGPT_IFRAME_HASH__),
      __CHATBOT_SITE_URL__: JSON.stringify(environment.__CHATBOT_SITE_URL__),
      __CHATPDF_SITE_URL__: JSON.stringify(environment.__CHATPDF_SITE_URL__),
    }),
    new MergeJsonWebpackPlugin({
      output: {
        groupBy: [
          { pattern: './src/main/webapp/i18n/en/*.json', fileName: './i18n/en.json' },
          { pattern: './src/main/webapp/i18n/it/*.json', fileName: './i18n/it.json' },
          // jhipster-needle-i18n-language-webpack - JHipster will add/remove languages in this array
        ],
      },
    })
  );

  config = merge(
    config,
    targetOptions.configuration === 'instrumenter'
      ? {
          module: {
            rules: [
              {
                test: /\.(js|ts)$/,
                use: [
                  {
                    loader: 'babel-loader',
                    options: {
                      plugins: ['istanbul'],
                    },
                  },
                ],
                enforce: 'post',
                include: path.resolve(__dirname, '../src/main/webapp/'),
                exclude: [/\.(e2e|spec)\.ts$/, /node_modules/, /(ngfactory|ngstyle)\.js/],
              },
            ],
          },
        }
      : {}
    // jhipster-needle-add-webpack-config - JHipster will add custom config
  );

  return config;
};

[Witoso]

After a quick glance, I have no idea that might be the problem. If it works in dev, and not in production, you need to investigate the differences in your build process. Without errors, or more specific pinpoints, I'm afraid we cannot help.