Unable to load ChartArea, ChartSeries from kendo-react-all

I am trying to run an example to display a chart create using in Kendo React.

The example is on this tutorial: https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/chart-area/

I have made a few changes to be able to run it via browser, without installing npm packages locally. However, I am unable to display this. I get an error in the console

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of ChartContainer. at ChartContainer

What am I missing??

    <!DOCTYPE html>
    <html>
      <head>
        <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.jsa/15.7.2/prop-types.min.js"></script>
        <script src="https://unpkg.com/@progress/kendo-date-math/dist/cdn/js/kendo-date-math.js"></script>
        <script src="https://unpkg.com/@progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
        <script src="https://unpkg.com/@progress/kendo-licensing/dist/index.js"></script>
        <script src="https://unpkg.com/@progress/kendo-react-intl/dist/cdn/js/kendo-react-intl.js"></script>
        <script src="https://unpkg.com/@progress/kendo-react-all/dist/cdn/js/kendo-react-all.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-material/dist/all.css">
      </head>
      <body>

        <div id="mydiv"></div>
        <script type="text/babel">
        const data = [1, 2, 3, 5]
        const Chart = window.KendoReactAll.Chart
        const ChartArea = window.KendoReactAll.ChartArea
        const ChartSeries = window.KendoReactAll.ChartSeries
        const ChartSeriesItem = window.KendoReactAll.ChartSeriesItem
        
        const ChartContainer = () => (
          <Chart>
            <ChartArea background="#eee" margin={30} />
            <ChartSeries>
              <ChartSeriesItem data={data} name="Fibonacci" />
            </ChartSeries>
          </Chart>
        );
        
        ReactDOM.render(<ChartContainer />, document.getElementById('mydiv'))
        </script>

      </body>
    </html>

Solution

The reason this snipped is failing is because ChartArea, ChartSeries and ChartSeriesItem are not found on the kendo-react-all library. You need to import kendo-react-chart.js.

https://unpkg.com/@progress/kendo-react-charts/dist/cdn/js/kendo-react-charts.js

Also, you need to change the source module from window.KendoReactAll to window.KendoReactCharts

At the end it should look like this:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.jsa/15.7.2/prop-types.min.js"></script>
    <script src="https://unpkg.com/@progress/kendo-date-math/dist/cdn/js/kendo-date-math.js"></script>
    <script src="https://unpkg.com/@progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
    <script src="https://unpkg.com/@progress/kendo-licensing/dist/index.js"></script>
    <script src="https://unpkg.com/@progress/kendo-react-intl/dist/cdn/js/kendo-react-intl.js"></script>
    <script src="https://unpkg.com/@progress/kendo-react-all/dist/cdn/js/kendo-react-all.js"></script>
    <script src="https://unpkg.com/@progress/kendo-react-charts/dist/cdn/js/kendo-react-charts.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-material/dist/all.css">
  </head>
  <body>

    <div id="mydiv"></div>
    <script type="text/babel">
    const data = [1, 2, 3, 5]
    const Chart = window.KendoReactCharts.Chart
    const ChartArea = window.KendoReactCharts.Chart
    const ChartSeries = window.KendoReactCharts.ChartSeries
    const ChartSeriesItem = window.KendoReactCharts.ChartSeriesItem
    
    const ChartContainer = () => (
      <Chart>
        <ChartArea background="#eee" margin={30} />
        <ChartSeries>
          <ChartSeriesItem data={data} name="Fibonacci" />
        </ChartSeries>
      </Chart>
    );
    
    ReactDOM.render(<ChartContainer />, document.getElementById('mydiv'))
    </script>

  </body>
</html>