How to add ckeditor5 webpack configuration in config-override.js ?

[Rajesh-Thiyagarajan]

Hi Team

I have done ckeditor5 webpack configuration in craco config. Now i want do add the webpack config in config-override.js

Previous Webpack config const path = require("path"); const webpack = require("webpack"); const { getLoader, loaderByName, addBeforeLoader } = require("@craco/craco"); const absolutePath = path.join(__dirname, "../components"); const { styles } = require("@ckeditor/ckeditor5-dev-utils"); const cssRegex = /.css$/; const cssModuleRegex = /.module.css$/;

const enableCKEWebpackConfigPlugin = (webpackConfig, { env, paths }) => { // Extract the oneOf array from the relevant webpack.module.rules object let oneOf; let ix; ix = webpackConfig.module.rules.findIndex(item => { return item.hasOwnProperty("oneOf"); }); oneOf = webpackConfig.module.rules[ix].oneOf;

// Add the SVG and CSS loaders to the oneOf array const additions = [

{
  test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
  test: /\.svg$/,
  use: ["raw-loader"]
},
{
  test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
  use: [
    {
      loader: "style-loader",
      options: {
        injectType: "singletonStyleTag"
      },
    },
    {
      loader: "postcss-loader",
      options: styles.getPostCssConfig({
        themeImporter: {
          themePath: require.resolve("@ckeditor/ckeditor5-theme-lark")
        },
        minify: true
      })
    }
  ]
},

]; additions.forEach((item, index) => { oneOf.push(item); });

// Modify cssRegex let loader; loader = oneOf.find(item => { if (item.test !== undefined) return item.test.toString() === cssRegex.toString(); }); loader.exclude = [cssModuleRegex, /ckeditor5-[^/\]+[/\]theme[/\].+.css$/];

// Modify cssModuleRegex loader = oneOf.find(item => { if (item.test !== undefined) return item.test.toString() === cssModuleRegex.toString(); }); loader.exclude = [/ckeditor5-[^/\]+[/\]theme[/\].+.css$/];

// Modify file-loader loader = oneOf.find(item => { if (item.loader !== undefined) return ( item.loader.toString() === require.resolve("file-loader").toString() ); }); loader.exclude = [ /.(js|mjs|jsx|ts|tsx)$/, /.html$/, /.json$/, /ckeditor5-[^/\]+[/\]theme[/\]icons[/\][^/\]+.svg$/, /ckeditor5-[^/\]+[/\]theme[/\].+.css$/, /.svg$/, ];

// Always return a config object. return webpackConfig; };

module.exports = { webpack: { alias: {}, plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery", "window.moment": "moment", moment: "moment", Raphael: "raphael", // required by morris.js }), ], configure: (webpackConfig, { env, paths }) => { const { isFound, match } = getLoader( webpackConfig, loaderByName("babel-loader") ); if (isFound) { const include = Array.isArray(match.loader.include) ? match.loader.include : [match.loader.include]; match.loader.include = include.concat[absolutePath]; const exclude = Array.isArray(match.loader.exclude) ? match.loader.exclude : [match.loader.exclude] match.loader.exclude = { test: match.loader.exlude || /node_modules/, not: [absolutePath] } } return enableCKEWebpackConfigPlugin(webpackConfig, { env, paths }); }, }, };

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.