This is a migrated thread and some comments may be shown as answers.

Using Kendo Editor with ES6 & Webpack

1 Answer 564 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Wes
Top achievements
Rank 1
Wes asked on 06 Sep 2017, 09:05 PM

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'
            ]
        }
    ]
},

 

 

1 Answer, 1 is accepted

Sort by
0
Wes
Top achievements
Rank 1
answered on 07 Sep 2017, 07:38 PM

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;

 

 

Tags
Editor
Asked by
Wes
Top achievements
Rank 1
Answers by
Wes
Top achievements
Rank 1
Share this question
or