0

I would like to use the kendo react libraries in my 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)

Any help to resolve would be fantastic.

I am using "@microsoft/sp-webpart-workbench": "1.7.0".

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.