Error with WebPack

[PratyushaDirectPath]

Hi @DevBugFix I am trying to run this project and I am having this error.

**/node_modules/@ckeditor/ckeditor5-core/theme/icons/image.svg:1:0 - Error: Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

**

Could you please let me know how to resolve this ?

Thank you!

[DevBugFix]

Hello watch my these videos hopefully this issue will fix https://youtu.be/7sDXwgYD1m4 https://youtu.be/HsjCkvEvQhA

[PratyushaDirectPath]

I did watch your videos and tried to implement but still the same error occurs. Package.json and webpack config files are also same but the angular and all other cdkeditor package versions are different apart from that I don't see any other differences.

[DevBugFix]

reason behind this version mismatch , try with same versions , when you try delete node module run nmp instal

[PratyushaDirectPath]

this is the package file for custom build

{ "name": "ckeditor5-custom-build", "author": "CKSource", "description": "A custom CKEditor 5 build made by the CKEditor 5 online builder.", "version": "0.0.1", "license": "SEE LICENSE IN LICENSE.md", "private": true, "main": "./build/ckeditor.js", "devDependencies": { "@ckeditor/ckeditor5-adapter-ckfinder": "^34.0.0", "@ckeditor/ckeditor5-autoformat": "^34.0.0", "@ckeditor/ckeditor5-basic-styles": "^34.0.0", "@ckeditor/ckeditor5-block-quote": "^34.0.0", "@ckeditor/ckeditor5-dev-utils": "^30.1.1", "@ckeditor/ckeditor5-dev-webpack-plugin": "^30.1.1", "@ckeditor/ckeditor5-editor-classic": "^34.0.0", "@ckeditor/ckeditor5-essentials": "^34.0.0", "@ckeditor/ckeditor5-heading": "^34.0.0", "@ckeditor/ckeditor5-image": "^34.0.0", "@ckeditor/ckeditor5-indent": "^34.0.0", "@ckeditor/ckeditor5-link": "^34.0.0", "@ckeditor/ckeditor5-list": "^34.0.0", "@ckeditor/ckeditor5-markdown-gfm": "^34.0.0", "@ckeditor/ckeditor5-paragraph": "^34.0.0", "@ckeditor/ckeditor5-paste-from-office": "^34.0.0", "@ckeditor/ckeditor5-table": "^34.0.0", "@ckeditor/ckeditor5-theme-lark": "^34.0.0", "@ckeditor/ckeditor5-typing": "^34.0.0", "css-loader": "^5.2.7", "postcss": "^8.4.12", "postcss-loader": "^4.3.0", "raw-loader": "^4.0.2", "style-loader": "^2.0.0", "terser-webpack-plugin": "^4.2.3", "webpack": "^5.72.0", "webpack-cli": "^4.9.2" }, "scripts": { "build": "webpack --mode production" } }

do you see anything wrong in there ?

[PratyushaDirectPath]

I am adding the webpack congig file as well :

/**

• @license Copyright (c) 2014-2022, CKSource Holding sp. z o.o. All rights reserved.
• For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */

'use strict';

/ eslint-env node /

const path = require( 'path' ); const webpack = require( 'webpack' ); const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' ); const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' ); const TerserWebpackPlugin = require( 'terser-webpack-plugin' );

module.exports = { devtool: 'source-map', performance: { hints: false },

entry: path.resolve( __dirname, 'src', 'ckeditor.js' ),

output: {
    // The name under which the editor will be exported.
    library: 'ClassicEditor',

    path: path.resolve( __dirname, 'build' ),
    filename: 'ckeditor.js',
    libraryTarget: 'umd',
    libraryExport: 'default'
},

optimization: {
    minimizer: [
        new TerserWebpackPlugin( {
            sourceMap: true,
            terserOptions: {
                output: {
                    // Preserve CKEditor 5 license comments.
                    comments: /^!/
                }
            },
            extractComments: false
        } )
    ]
},

plugins: [
    new CKEditorWebpackPlugin( {
        // UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
        // When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
        language: 'en',
        additionalLanguages: 'all'
    } ),
    new webpack.BannerPlugin( {
        banner: bundler.getLicenseBanner(),
        raw: true
    } )
],

module: {
    rules: [
        {
            test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
            use: [ 'raw-loader' ]
        },
        {
            test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.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
                        } )
                    }
                },
            ]
        }
    ]
}

};