Telerik Forums / KendoReact

VS2019 Pro + .Net Core 5.0 App + Simple DataGrid no databinding = invalid-hook-call

5 Answers 138 Views
Drawing Grid Licensing
Cyril
Top achievements
Rank 1
Iron
Cyril asked on 17 Jun 2021, 08:37 AM | edited on 17 Jun 2021, 09:34 AM

Hello,

I can't try ReactKendo DataGrid component for my project (Tests before buy)

With others components like PanelBar, Calendar, etc.. :

I tried this code directly on my index.js

import React from 'react';
import ReactDOM from 'react-dom'
  
import { Grid, GridColumn } from "@progress/kendo-react-grid";

ReactDOM.render(
  <div>
        <Grid style={{ height: "400px" }}>
            <GridColumn field="ProductID" title="ID" width="40px" />
            <GridColumn field="ProductName" title="Name" width="250px" />
            <GridColumn field="Category.CategoryName" title="CategoryName" />
            <GridColumn field="UnitPrice" title="Price" />
            <GridColumn field="UnitsInStock" title="In stock" />
        </Grid>
  </div>,
  document.getElementById('my-app'));

my index.html :

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <base href="%PUBLIC_URL%/" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
    <script src="https://unpkg.com/@progress/kendo-date-math@dev/dist/cdn/js/kendo-date-math.js"></script>
    <script src="https://unpkg.com/@progress/kendo-drawing@latest/dist/cdn/js/kendo-drawing.js"></script>
    <script src="https://unpkg.com/@progress/kendo-react-intl@latest/dist/cdn/js/kendo-react-intl.js"></script>
    <script src="https://unpkg.com/@progress/kendo-react-all@latest/dist/cdn/js/kendo-react-all.js"></script>

    <title>MyTest</title>
</head>
<body>
    <div id="my-app">

    </div>
</body>

</html>

For compilation on VS2019 Pro 16.9.3 with node 14.17 (npm 6.14.13) :

I activated trial version of KendoReact for 30 days today via npx command line !

On Chrome and on Firefox browser, I have this error message :

my package.json :

My Packages Nuget list :

Very simple strangely !!!

And I have the same issue on VS Code last version too !!!!

Do you can help me to resolve this issue please ?

I need test this component before my order of ReactKendo !!!!

Thank you

 

 

5 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 17 Jun 2021, 01:55 PM

Hello, Cyril,

Thank you for the details.

I see that React and the KendoReact components are loaded twice:

- From NPM:

import React from 'react';
import ReactDOM from 'react-dom'
  
import { Grid, GridColumn } from "@progress/kendo-react-grid";

- From the scripts:

    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
    <script src="https://unpkg.com/@progress/kendo-date-math@dev/dist/cdn/js/kendo-date-math.js"></script>
    <script src="https://unpkg.com/@progress/kendo-drawing@latest/dist/cdn/js/kendo-drawing.js"></script>
    <script src="https://unpkg.com/@progress/kendo-react-intl@latest/dist/cdn/js/kendo-react-intl.js"></script>
    <script src="https://unpkg.com/@progress/kendo-react-all@latest/dist/cdn/js/kendo-react-all.js"></script>
Please load them only from one place as this causes two versions to be loaded and can cause multiple issues.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Cyril
Top achievements
Rank 1
Iron
answered on 17 Jun 2021, 06:39 PM

Hello Stefan

Thank you for your response but I've the same issue with all scripts disabled

Only if I use datagrid !!! With others objects no issue !!!

My index.js :

import React from 'react';
import ReactDOM from 'react-dom'
import { Grid, GridColumn } from "@progress/kendo-react-grid";

ReactDOM.render(
  <div>
        <Grid style={{ height: "400px" }}>
            <GridColumn field="ProductID" title="ID" width="40px" />
            <GridColumn field="ProductName" title="Name" width="250px" />
            <GridColumn field="Category.CategoryName" title="CategoryName" />
            <GridColumn field="UnitPrice" title="Price" />
            <GridColumn field="UnitsInStock" title="In stock" />
        </Grid>
  </div>,
  document.getElementById('my-app'));

My new index.html :


<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <base href="%PUBLIC_URL%/" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <link href="./css/fontawesome/all.css" rel="stylesheet">

    <title>MaquetteCEAReact</title>
</head>
<body>
    <div id="my-app">

    </div>
</body>

</html>

The famous issue :

It's not simple apparently !!! Maybe a problem npm package version or nuget package. It's not VS2019 or VS Code

Sorry I would like that your response be the solution !

I tested with node v16. Same issue !!

 

Stefan
Telerik team
commented on 18 Jun 2021, 05:04 AM

Thank you for the extra details.

We made different tests and the application was working as expected, and I assume we are missing a small detail.

Is it possible to share an example with the issue and I will be happy to inspect it locally and provide a solution for it.
Cyril
Top achievements
Rank 1
Iron
commented on 18 Jun 2021, 08:33 AM

See next post
0
Cyril
Top achievements
Rank 1
Iron
answered on 18 Jun 2021, 06:55 AM | edited on 18 Jun 2021, 07:14 AM
Lotus2.zip

Hello,

I created a new project C# .Net Core 5.0 with VS2019.

It's just a little bit project with datagrid empty (no databinding)

Just to display a datagrid with an header

After test, I've always the same issue !

I kept node v16 for the moment

See in file-attach

Thank you in advance for your support

 

 

Stefan
Telerik team
commented on 21 Jun 2021, 10:40 AM

thank you for the proejct. I have tried to run it but encountered different errors. 

If this is made via one of the built-in application templates, could you please let me know which one and the chosen options? I will make a new project, add the KendoReact Grid and send it to you.

0
Cyril
Top achievements
Rank 1
Iron
answered on 21 Jun 2021, 11:40 AM

Hello Stefan,

I used the VS wizard like below (nothing's special)

I always blocked on my project.

We need resolve this issue to do an order of ReactKendo licence (not me, my team leader)

Thank you

0
Cyril
Top achievements
Rank 1
Iron
answered on 21 Jun 2021, 05:25 PM

Hello, Stefan,

Today, after update of VS2019 to 16.10.2

I created a new project and my issue has been resolved.

My packages.json file generated by VS 2019 after update is very different !!!

I haven't downgrade node from v16 to v14.17

It's an issue with VS2019 16.8.3. and somes npm packages version 

Thank you for your support

All is ok to order ReactKendo Licence now !!

 

Stefan
Telerik team
commented on 22 Jun 2021, 05:07 AM

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

It could be indeed due to some package versions from the template which were resolved in the latest version.

If any issues occur in the future, please let us know and we will be happy to assist.
Tags
Drawing Grid Licensing
Asked by
Cyril
Top achievements
Rank 1
Iron
Answers by
Stefan
Telerik team
Cyril
Top achievements
Rank 1
Iron
Cyril
Top achievements
Rank 1
Iron
Share this question
or