spfx kendo react

Hi Lori,

Currently we have no such example which we can provide, however I tried to reproduce the issue using yeoman scaffold generated application (@microsoft/sharepoint) but to no avail - everything is working as expected on our side. Could you please provide example application where the issue is reproduced and send it back to us - this would help us pinpoint the exact reason for this behavior.

Regards,
Vladimir Iliev
Progress Telerik

Hi

Repo available at https://github.com/ryanlori/KendoSharepoint

As mentioned works fine on local workbench but not on the sharepoint online hosted workbench.

Lori

Hello, Lori,

Thank you for the project.

After more research, I noticed that we had a similar issue that occurs due to incorrect bundle for production of ReactDOMServer.

The main problem is caused by the fact that the ReactDOMServer, which is used for position calculations for the popup of the DropDown, was not bundled correctly.

Add the ReactDomServer alongside the other vendor scripts. Please note that this is necessary since it is not exported through the main module of the react-dom package.

As in spfx, we do not have access to the vendors' array, I will research more how we can add explicitly react-dom/server to the production build.

Regards,
Stefan
Progress Telerik

Fantastic Stefan - it would be fantastic to be able to use the full suite of Kendo tools in spfx.

Looking forward to your update.

Thanks again

Lori

Hello, Lori,

Could you please share the steps on uploading the project to the SharePoint online hosted workbench?

This will help us test the fixes that we will try as now it is working locally, and we cannot determine if the changes actually affect the issue.

Regards,
Stefan
Progress Telerik

Hello, Lori,

As the issue occurs when using the built CDN distribution the issue is probably caused by the missing react-dom/server. When bundling, even if the entire react-dom is imported, the bundler removes react-dom/server as it assumes that it will not be needed in client code distribution. As we support server-side rendering this code is still used.

I can suggest importing react-dom/server explicitly inside the application and give it a try. This should tell the bundler to still bundle it for the CDN distribution.

Let me know if this resolves the issue.

Regards,
Stefan
Progress Telerik

Hi Stefan, I just change the hosted workbench in the launch.json to point at our version of sharepoint online. It means I can test webparts without having to upload them everytime to sharepoint. Its probably not much help. If I can help in any way please let me know

Hello, Lori,

Thank you for the additional information.

Please advise if you tried the approach suggested to add explicitly "react-dom/server" as an import at the root of the application and deploying again?

Regards,
Stefan
Progress Telerik

Hi Stefan

Can you explain what you mean?a

Do you mean just including

import * as ReactDOMServer from 'react-dom/server'; in the tsx file

 

or  should I add it to externals in the config i.e.

"externals": {
"react-dom/server": "node_modules/react-dom/dist/react-dom-server.min.js"
},

added this to config.json

 

"externals": {
"react-dom/server": "node_modules/react-dom/umd/react-dom-server.browser.production.min.js"
},

 

seems to have fixed that issue

Hello, Lori,

I'm very glad to hear that the issue is resolved.

Also, thank you for confirming the approach which is fixing it this is highly appreciated.

Regards,
Stefan
Progress Telerik

This fix did not work for me.  I've successfully implemented grids, tabs, and a few other Kendo React components in my SPFx SharePoint WebPart but I can't get the DropDown to work.  I'm experiencing the same behavior as Lori.  It loads but when I click it the entire web part disappears.  The versions of the components I'm using are a bit newer:

...

"dependencies": {
"@microsoft/sp-core-library": "1.7.1",
"@microsoft/sp-lodash-subset": "1.7.1",
"@microsoft/sp-office-ui-fabric-core": "1.7.1",
"@microsoft/sp-webpart-base": "1.7.1",
"@progress/kendo-data-query": "^1.5.1",
"@progress/kendo-react-dateinputs": "^2.10.0",
"@progress/kendo-react-dropdowns": "^2.10.0",
"@progress/kendo-react-grid": "^2.10.0",
"@progress/kendo-react-inputs": "^2.10.0",
"@progress/kendo-react-intl": "^2.10.0",
"@progress/kendo-react-layout": "^2.10.0",
"@progress/kendo-theme-default": "^3.5.1",
"@types/es6-promise": "0.0.33",
"@types/react": "16.4.2",
"@types/react-dom": "16.0.5",
"@types/webpack-env": "1.13.1",
"moment": "^2.24.0",
"react": "16.3.2",
"react-dom": "16.3.2"
},
"resolutions": {
"@types/react": "16.4.2"
},
"devDependencies": {
"@microsoft/sp-build-web": "1.7.1",
"@microsoft/sp-tslint-rules": "1.7.1",
"@microsoft/sp-module-interfaces": "1.7.1",
"@microsoft/sp-webpart-workbench": "1.7.1",
"gulp": "~3.9.1",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2"
}

Any assistance would be greatly appreciated.

Thank you

Hello, Mark,

If the error is the same one, please ensure that react-dom-server is indeed added to the built files:

to config.json

"externals": {

 "react-dom/server": "node_modules/react-dom/umd/react-dom-server.browser.production.min.js"

}

If the file is added and the issue still occurs, please share a live URL if possible, so we can debug it and determine what else could be causing the same error.

Regards,
Stefan
Progress Telerik

Hi Mark 

When I am using the kendo components in spfx there are two changes I make

One to the gulp.js file

'use strict';

const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
const path = require('path');

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

build.configureWebpack.mergeConfig({

additionalConfiguration: (generatedConfiguration) => {

generatedConfiguration.module.rules.map(rule => {
if (rule.use.indexOf("source-map-loader") != -1) {
rule.exclude = path.resolve(__dirname, "node_modules");
}
});

return generatedConfiguration;
}
});

build.initialize(gulp);

 

And also to the config.json

"externals": {
"react-dom/server": "node_modules/react-dom/umd/react-dom-server.browser.production.min.js"
},

Hope it helps 

Lori

I've implemented your suggestions and it's working great.  Thank you Lori!

thats great Mark best of luck with it.

Thanks lori for the required research and guiding us in fixing this error. I was implementing kendo grid in spfx react and somehow on local workbench, everything was working fine but on the sharepoint hosted workbench the filter menu was not opening somehow and giving me the same error.

Making these changes made it working!

Hi Sahil

Great to hear you got it working. 

Kindest Regards

Lori