editor not showing/rendering on production mode #463
Description
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;
};