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