CKEditor & Webpack: missing loaders

Question

I'm trying to add CKEditor5 to my website following this guide: https://docs.ckeditor.com/ckeditor5/latest/framework/guides/quick-start.html

I have done the steps where it tells me to add the loaders. I've not changed anything to what the guide tells you to add to yourwebpack config.

This is my full webpack config:

'use strict';

var webpack = require('webpack'),
    path = require('path'),
    glob = require('glob'),
    ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

var pageEntryArray = glob.sync('./assets/scripts/views/**/*.ts');
var pageEntries = {};
pageEntryArray.forEach(function (item) {
    var ext = path.extname(item);
    var filename = path.basename(item, ext);
    pageEntries[filename] = item;
});

var otherEntries = {
    'init': ['babel-polyfill', 'whatwg-fetch', 'element-closest', './assets/scripts/init.ts'],
}

var entries = Object.assign({}, otherEntries, pageEntries);

var cacheLoader = {
    loader: 'cache-loader'
};

var threadLoader = {
    loader: 'thread-loader',
    options: {
        // there should be 1 cpu for the fork-ts-checker-webpack-plugin
        workers: require('os').cpus().length - 1,
    }
};

var babelLoader = {
    loader: 'babel-loader',
    options: {
        cacheDirectory: true,
        presets: ["es2015", "es2016"]
    }
};

var config = {
    entry: entries,
    output: {
        path: path.resolve(__dirname, './wwwroot/js'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                use: [
                    cacheLoader,
                    threadLoader,
                    babelLoader,
                    {
                        loader: 'ts-loader',
                        options: {
                            happyPackMode: true
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    cacheLoader,
                    threadLoader,
                    babelLoader,
                ]
            },
            {
                test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
                use: ['raw-loader']
            },
            {
                test: /ckeditor5-[^/]+\/theme\/[^/]+\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    plugins: [
        new ForkTsCheckerWebpackPlugin({
            checkSyntacticErrors: true,
            tslint: false
        }),
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            filename: 'common.js',
            minChunks: 2
        })
    ]
};

module.exports = config;

As you can see I've added the loader for .scss files and .svg files, however, when I try to run webpack, I get the following errors:

ERROR in ./node_modules/@ckeditor/ckeditor5-editor-classic/theme/theme.scss
Module parse failed: Unexpected character '@' (4:0)
You may need an appropriate loader to handle this file type.
| // For licensing, see LICENSE.md or http://ckeditor.com/license
| 
| @import '~@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
| 
| .ck-editor {
 @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js 16:0-29
 @ ./assets/scripts/views/project-message/project-message-send.ts

ERROR in ./node_modules/@ckeditor/ckeditor5-undo/theme/icons/redo.svg
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| 
 @ ./node_modules/@ckeditor/ckeditor5-undo/src/undo.js 15:0-47
 @ ./node_modules/@ckeditor/ckeditor5-essentials/src/essentials.js
 @ ./assets/scripts/views/project-message/project-message-send.ts

ERROR in ./node_modules/@ckeditor/ckeditor5-basic-styles/theme/icons/italic.svg
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| 
 @ ./node_modules/@ckeditor/ckeditor5-basic-styles/src/italic.js 13:0-51
 @ ./assets/scripts/views/project-message/project-message-send.ts

ERROR in ./node_modules/@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| 
 @ ./node_modules/@ckeditor/ckeditor5-basic-styles/src/bold.js 13:0-47
 @ ./assets/scripts/views/project-message/project-message-send.ts

ERROR in ./node_modules/@ckeditor/ckeditor5-undo/theme/icons/undo.svg
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| 
 @ ./node_modules/@ckeditor/ckeditor5-undo/src/undo.js 14:0-47
 @ ./node_modules/@ckeditor/ckeditor5-essentials/src/essentials.js
 @ ./assets/scripts/views/project-message/project-message-send.ts
[11:33:35] Finished 'scripts' after 17 s
Process terminated with code 0.

This is my package.json:

{
    "version": "1.0.0",
    "name": "crm.einionmedia.com",
    "private": true,
    "devDependencies": {
        "@types/bootstrap": "^3.3.36",
        "@types/chart.js": "^2.6.2",
        "@types/eonasdan-bootstrap-datetimepicker": "^4.17.25",
        "@types/flatpickr": "^3.0.2",
        "@types/jquery": "^3.2.10",
        "@types/knockout": "^3.4.44",
        "@types/lodash.flattendeep": "^4.4.2",
        "@types/lodash.groupby": "^4.6.3",
        "@types/lodash.merge": "^4.6.2",
        "@types/lodash.orderby": "^4.6.2",
        "@types/numeral": "^0.0.21",
        "@types/select2": "^4.0.38",
        "@types/sortablejs": "^1.3.31",
        "@types/virtual-dom": "^2.0.27",
        "babel-core": "^6.25.0",
        "babel-loader": "^7.1.1",
        "babel-polyfill": "^6.23.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-es2016": "^6.24.1",
        "bootstrap": "^3.3.7",
        "cache-loader": "^1.0.3",
        "chart.js": "^2.6.0",
        "choices.js": "^3.0.2",
        "ckeditor": "^4.7.3",
        "del": "^3.0.0",
        "element-closest": "^2.0.2",
        "eonasdan-bootstrap-datetimepicker": "^4.17.46",
        "fine-uploader": "^5.15.0",
        "flatpickr": "^3.0.2",
        "font-awesome": "^4.7.0",
        "fork-ts-checker-notifier-webpack-plugin": "^0.2.0",
        "fork-ts-checker-webpack-plugin": "^0.2.8",
        "glob": "^7.1.2",
        "gulp": "^3.9.1",
        "gulp-clean-css": "^3.7.0",
        "gulp-cli": "^1.3.0",
        "gulp-concat": "^2.6.1",
        "gulp-imagemin": "^3.3.0",
        "gulp-sass": "^3.1.0",
        "gulp-util": "^3.0.8",
        "imagemin-pngquant": "^5.0.1",
        "inputmask": "^3.3.8",
        "jquery": "^3.2.1",
        "knockout": "^3.4.2",
        "lodash.flattendeep": "^4.4.0",
        "lodash.groupby": "^4.6.0",
        "lodash.merge": "^4.6.0",
        "lodash.orderby": "^4.6.0",
        "moment": "^2.18.1",
        "numeral": "^2.0.6",
        "path": "^0.12.7",
        "select2": "^4.0.3",
        "sortablejs": "^1.6.0",
        "thread-loader": "^1.1.1",
        "ts-loader": "^2.3.2",
        "typescript": "^2.4.2",
        "virtual-dom": "^2.1.1",
        "webpack": "^3.8.1",
        "webpack-notifier": "^1.5.0",
        "whatwg-fetch": "^2.0.3"
    },
    "dependencies": {
        "@ckeditor/ckeditor5-basic-styles": "^1.0.0-alpha.1",
        "@ckeditor/ckeditor5-editor-classic": "^1.0.0-alpha.1",
        "@ckeditor/ckeditor5-essentials": "^1.0.0-alpha.1",
        "@ckeditor/ckeditor5-paragraph": "^1.0.0-alpha.1",
        "css-loader": "^0.28.7",
        "node-sass": "^4.6.0",
        "raw-loader": "^0.5.1",
        "sass-loader": "^6.0.6",
        "style-loader": "^0.19.0"
    }
}

Why does Webpack not use the loaders I added in the configuration file? Thanks in advance.

nbokmans · Accepted Answer

Turns out it's an issue with the test for the rules not matching the file names, as per an answer in an issue on CKEditor5 repository: https://github.com/ckeditor/ckeditor5/issues/139#issuecomment-286551372 - I changed the test regex to match any .svg and .scss files, and now the appropriate loaders are being used.

CKEditor & Webpack: missing loaders

Answers (1)

Related Questions

CKEditor &amp; Webpack: missing loaders

Answers (1)

Related Questions

CKEditor & Webpack: missing loaders