Using Kendo Editor with ES6 & Webpack

2 posts, 0 answers
  1. Wes
    Wes avatar
    8 posts
    Member since:
    Aug 2016

    Posted 06 Sep Link to this post

    I'm attempting to include the Kendo UI Editor control in an ES6 project of mine, and have managed to get pretty far, but there's some wiring required to get the CSS loaded that is eluding me. As it stands, I can get a working editor created in my React component, but the resulting HTML is unstyled on the client.

    Trying to add the paths to the CSS files in the node_modules folder via import statements leads to the below error.

    This seems like something a AAA package like Kendo should support with ease. My alternative is to throw out the entire NPM package and just throw the static files into the /public folder. This seems a less than ideal way to proceed.

    Again, the only problem I have is trying to get the CSS to work. The JS portion is being loaded and works fine.

    Webpack compilation results in error:

    ERROR in ../~/css-loader!../~/@progress/kendo-ui/css/web/kendo.common.core.css
    Module not found: Error: Can't resolve 'file' in 'C:\sources\src'
     @ ../~/css-loader!../~/@progress/kendo-ui/css/web/kendo.common.core.css 6:100917-100972
     @ ../~/@progress/kendo-ui/css/web/kendo.common.core.css
     @ ./components/Main/KendoTest/KendoTest.js
     @ ./components/App.js
     @ ./components/Routes.js
     @ ./main.js
     @ multi ./main.js webpack-hot-middleware/client?path=/__webpack_hmr&timeout=10000&reload=true

     

    React Component:

    import React from 'react';
    import {PropTypes} from 'prop-types';
     
    import $ from 'jquery';
    import '@progress/kendo-ui/js/kendo.core';
    import '@progress/kendo-ui/js/kendo.editor';
     
    /* todo: need to find a way to pull these via webpack without loader errors
    for all the little files like .gif and .woff*/
    import '@progress/kendo-ui/css/web/kendo.common.core.min.css';
    import '@progress/kendo-ui/css/web/kendo.default.min.css';
     
     
    import './kendotest.less';
     
    class KendoTest extends React.Component {
        constructor(props) {
            super(props);
            this.state = {};
        }
     
        componentWillMount() {
            console.log(`Mounting kendo editor`);
        }
     
        componentDidMount() {
            $('#editor').kendoEditor();
        }
     
        render() {
            return (
                <section className="kendo-test">
                    <div>Editor:</div>
                    <textarea id="editor" rows="10" cols="50" defaultValue="test" />
                </section>
            );
        }
    }
     
    Object.assign(KendoTest, {
        propTypes: {},
        defaultProps: {}
    });
     
    export default KendoTest;

     

    Webpack:

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: jsLoaders
                /* TODO: implement the loader/options object with syntax-dynamic-import,
                 * ref: https://webpack.js.org/guides/code-splitting-async/ */
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file?name=public/fonts/[name].[ext]'
            },
            {
                test: /\.(jpe?g|png|gif)$/i,
                loaders: [
                    'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
                    'image-webpack-loader?bypassOnDebug&optimizationLevel=2&interlaced=false'
                ]
            }
        ]
    },

     

     

  2. Wes
    Wes avatar
    8 posts
    Member since:
    Aug 2016

    Posted 07 Sep in reply to Wes Link to this post

    I've managed to narrow down the issue, so for those who might have similar problems, here's the solution. The problem was the syntax of the font loader configuration was incorrect. Using webpack's verbose error flag helped narrow this down. The full webpack configuration I'm using is below, along with the syntax for a correct import 

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: jsLoaders
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.json$/,
                use: 'json-loader'
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: 'file-loader?name=fonts/[name].[ext]'
            },
            {
                test: /\.(jpe?g|png|gif)$/i,
                use: [
                    'file-loader', {
                        loader: 'image-webpack-loader',
                        options: {
                            gifsicle: {
                                interlaced: false
                            },
                            optipng: {
                                optimizationLevel: 7
                            },
                            pngquant: {
                                quality: '65-90',
                                speed: 4
                            },
                            mozjpeg: {
                                progressive: true,
                                quality: 65
                            },
                            webp: {
                                quality: 75
                            }
                        }
                    }
                ]
            }
        ]
    },

    React Component

     

    import React from 'react';
    import {PropTypes} from 'prop-types';
     
    import $ from 'jquery';
    import '@progress/kendo-ui/js/kendo.core';
    import '@progress/kendo-ui/js/kendo.editor';
     
    import '@progress/kendo-ui/css/web/kendo.common.css';
    import '@progress/kendo-ui/css/web/kendo.default.css';
     
     
    import './kendotest.less';
     
    class KendoTest extends React.Component {
        constructor(props) {
            super(props);
            this.state = {};
        }
     
        componentWillMount() {
            console.log(`Mounting kendo editor`);
        }
     
        componentDidMount() {
            $('#editor').kendoEditor();
        }
     
        render() {
            return (
                <section className="kendo-test">
                    <div>Editor:</div>
                    <textarea id="editor" rows="10" cols="50" defaultValue="test" />
                </section>
            );
        }
    }
     
    Object.assign(KendoTest, {
        propTypes: {},
        defaultProps: {}
    });
     
    export default KendoTest;

     

     

Back to Top