spfx kendo react

[Lori]

Just wondering if there are any examples that I can download that have spfx and kendo built in.

I would like to use the kendo react libraries in my sharepoint web part. At the moment I am just using the following example to test the dropdown list.
Data and Value Binding

While its working fine in my local workbench when I go to the hosted workbench it doesn't work. When I click on the dropdown it disappears and I get the following :

Uncaught TypeError: Cannot set property 'getCurrentStack' of undefined at setCurrentDebugStack (react-dom-server.browser.development.js:1794) at ReactDOMServerRenderer.read (react-dom-server.browser.development.js:2304) at Object.renderToStaticMarkup (react-dom-server.browser.development.js:2689) at Popup.calculatePosition (Popup.js:167) at Popup.render (Popup.js:119)

 

import * as React from 'react';
    import styles from './AddNewSample.module.scss';
    import { IAddNewContractProps } from './IAddNewSampleProps';
    import { escape } from '@microsoft/sp-lodash-subset';
    import { AutoComplete, ComboBox, DropDownList, MultiSelect } from '@progress/kendo-react-dropdowns';

import { IntlProvider, load } from '@progress/kendo-react-intl';
import '@progress/kendo-theme-default/dist/all.css';

export default class AddNewSample extends React.Component<IAddNewSampleProps, {}> {
  sports = [
    { text: 'Basketball', id: 1 },
    { text: 'Football', id: 2 },
    { text: 'Tennis', id: 3 },
    { text: 'Volleyball', id: 4 }
];
state = {
    value: { text: 'Football', id: 2 }
};

handleChange = (event) => {
    this.setState({
        value: event.target.value
    });
}

  public render(): React.ReactElement<IAddNewSampleProps> {
    return (
      <div >
        <div className="example-config">
                    Selected Value: {JSON.stringify(this.state.value)}
                </div>
                <DropDownList
                    data={this.sports}
                    textField="text"
                    dataItemKey="id"
                    value={this.state.value}
                    onChange={this.handleChange}
                />
      </div>
    );
  }
}


Package Versions
{
  "name": "add-Sample",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {

    "@progress/kendo-react-dropdowns": "^2.6.1",
    "@progress/kendo-react-intl": "^2.6.1",
    "@progress/kendo-theme-default": "^3.3.1",
    "@microsoft/loader-set-webpack-public-path": "^3.2.102",
    "@microsoft/sp-core-library": "1.7.0",
    "@microsoft/sp-lodash-subset": "1.7.0",
    "@microsoft/sp-office-ui-fabric-core": "1.7.0",
    "@microsoft/sp-webpart-base": "1.7.0",
    "@pnp/common": "^1.2.5",
    "@pnp/graph": "^1.2.5",
    "@pnp/logging": "^1.2.5",
    "@pnp/odata": "^1.2.5",
    "@pnp/sp": "^1.2.5",
    "@pnp/spfx-controls-react": "1.10.0",
    "@pnp/spfx-property-controls": "1.12.0",
    "@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.22.2",
    "react": "16.3.2",
"react-dom": "16.3.2"
  },
  "resolutions": {
    "@types/react": "16.4.2"
  },
  "devDependencies": {
    "@microsoft/set-webpack-public-path-plugin": "^2.1.58",
    "@microsoft/sp-build-web": "1.7.0",
    "@microsoft/sp-module-interfaces": "1.7.0",
    "@microsoft/sp-tslint-rules": "1.7.0",
    "@microsoft/sp-webpart-workbench": "1.7.0",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
    "ajv": "~5.2.2",
"gulp": "~3.9.1"
  }
}

[Vladimir Iliev]

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

[Lori]

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

[Stefan]

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

[Lori]

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

[Stefan]

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

[Stefan]

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

[Lori]

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

[Stefan]

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

[Lori]

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"
},

[Lori]

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

[Stefan]

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

[Mark]

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

[Stefan]

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

[Lori]

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

[Mark]

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

[Lori]

thats great Mark best of luck with it.

[Sahil]

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!

[Lori]

Hi Sahil

Great to hear you got it working. 

Kindest Regards

Lori